astro-swiper

Install

npm install astro-swiper

Read the full doc on Github

Swiper options documentation can be found on swiperjs.com

Examples

Autoplay Example

Autoplay example: slider of 3 images, looping.

Full code

Code Snippet

---
import { Swiper, SwiperWrapper, SwiperSlide } from "astro-swiper";
---
<Swiper
options={{    // check options at https://swiperjs.com/swiper-api
  autoplay: {
    delay: 700,
    disableOnInteraction: false,
    waitForTransition: false,
  },
  loop: true,
}}>
<SwiperWrapper>
  <SwiperSlide> <img src=... /> </SwiperSlide>
  <SwiperSlide> <img src=... /> </SwiperSlide>
  <SwiperSlide> <img src=... /> </SwiperSlide>
</SwiperWrapper>
</Swiper>

Navigation Example

Navigation example: slider of 3 images, with arrow or swiping to navigate from a slide to another one.

Full code

Code Snippet

---
...
import { SwiperButtonPrev, SwiperButtonNext } from "astro-swiper";
import type { AstroSwiperType } from "astro-swiper";

const astroSwiperOptions: AstroSwiperType = {
options: {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
},
};
---
<Swiper>
<SwiperWrapper>
  <SwiperSlide> <img src=... /> </SwiperSlide>
  <SwiperSlide> <img src=... /> </SwiperSlide>
  <SwiperSlide> <img src=... /> </SwiperSlide>
</SwiperWrapper>

<SwiperButtonPrev />
<SwiperButtonNext />
</Swiper>

Pagination Example

Pagination example: slider of 3 images, with autoplay and pagination: 3 dots indicates which slide is displayed.

Full code

Code Snippet

---
...
import { SwiperButtonPrev, SwiperButtonNext } from "astro-swiper";
...
---
<Swiper>
<SwiperWrapper>
  <SwiperSlide> <img src=... /> </SwiperSlide>
  <SwiperSlide> <img src=... /> </SwiperSlide>
  <SwiperSlide> <img src=... /> </SwiperSlide>
</SwiperWrapper>

<SwiperPagination />
</Swiper>

Thumbnail Example

Thumbnail example: a slider, with thumbnails at the bottom to see the progress.

The code is made of:

• 2 slides: 1 for the main slide, and one for the thumbnail
• each slide have a uniqueClass defined
• the main slider refers to the thumbnail one using linkToThumbUniqueClass being the uniqueClass of the thumbnail slide
• the thumbnail slider has an option to set the number of thumbs to show

Full code

Code Snippet

---
import { Swiper, SwiperWrapper, SwiperSlide } from "astro-swiper";
---

<Swiper
uniqueClass="myswiper-main"
linkToThumbUniqueClass="myswiper-thumbnail"
options={{ ... }}>
<SwiperWrapper>
  <SwiperSlide> ... </SwiperSlide>
  <SwiperSlide> ... </SwiperSlide>
  ...
</SwiperWrapper>
</Swiper>

<Swiper
uniqueClass="myswiper-thumbnail"
options={{
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
  ...
}}>
<SwiperWrapper>
  <SwiperSlide> ... </SwiperSlide>
  <SwiperSlide> ... </SwiperSlide>
  ...
</SwiperWrapper>
</Swiper>