用户Swiper.js中的Astro.build

Question

请谁能帮我如何使用刷卡或任何其他滑块在astro.build？

就像我们用在反应中一样。

Answer 1

如果您想将旋转木马作为React组件来实现，那么客户:负载就像Andrés已经注意到的那样工作。

// 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，您可以使用客户端脚本。

---
// 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>

Answer 2

是的，您可以使用component，例如，React组件集客户机:load：

<MySlider client:load />