Astro Swiper

Astro Swiper is the native Astro component for Swiper, dedicated to slides / carousel / photo swiper.

Demo

Help needed

Do you need help to integrate astro-swiper in your astro template / component? 2 ways to ask:

• mention me with @pascal-brand38 in an issue on your own github repo
• or fill a github issue in astro-swiper github

I'll be happy to help!

Installation

Get the latest version from NPM:

$ npm install astro-swiper

Usage

First Example

Here is the astro code of a loop carousel, of 3 pictures, with 1 second interval:

---
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>
    <!-- Slides -->
    <SwiperSlide>
      <img src="https://picsum.photos/455/256?nb=1" alt="" />
    </SwiperSlide>
    <SwiperSlide>
      <img src="https://picsum.photos/455/256?nb=2" alt="" />
    </SwiperSlide>
    <SwiperSlide>
      <img src="https://picsum.photos/455/256?nb=3" alt="" />
    </SwiperSlide>
  </SwiperWrapper>
</Swiper>

<style>
  .swiper {
    max-width: 455px;
    aspect-ratio: 16/9;
  }

  img {
    width: 100%;
  }
</style>

Complex Examples

Please check the online doc for a fullset of examples, including navigation and thumbnails.

Full code is provided.

Support astro-swiper

Please star the project if you like it!