slider - Astro.build 中的用户 Swiper.js

Question

请谁能帮助我如何在 astro.build 中使用 swiper 或任何其他 slider ？

就像我们在 React 中使用的那样。

Answer 1

如果您想将轮播实现为 React 组件，client:load正如安德烈斯已经指出的那样。

// src/components/MySwiper.jsx
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

export default function MySwiper() {
  return (
    <Swiper>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
    </Swiper>
  );
}

---
// src/pages/swiper.astro
import MySwiper from '../components/MySwiper.jsx';
---
<MySwiper client:load />

或者，如果您不介意使用 CDN 中的 Swiper，您可以使用 Client-Side Scripts .

---
// src/pages/swiper.astro
---
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script is:inline src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script is:inline>new Swiper('.swiper')</script>