CODEWITHSUNDEEP
sliderswiper.jsastrojs
Muhammad Khalil
Muhammad Khalil

Reputation: 23

User Swiper.js in Astro.build

Please can anyone help me how I can use swiper or any other slider in astro.build?

Like we use in react.

Upvotes: 2

Views: 13633

Answers (2)

mythosil
mythosil

Reputation: 423

If you'd like to implement carousel as React component, client:load works as Andrés already noted.

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

Or if you don't mind using Swiper from CDN you can use 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>

Upvotes: 6

Andr&#233;s L&#243;pez
Andr&#233;s L&#243;pez

Reputation: 41

Yes, you can use swipper js, the React component set client:load for example:

<MySlider client:load />

Upvotes: 4

Related Questions