Astro Swiper

Astro Swiper - native component for Swiper. Use for slides, carousel, photo swiper.

Check demo

Installation

npm install astro-swiper
pnpm add astro-swiper
bun install astro-swiper

Usage

Carousel with loop, 3 pictures, 1 second interval:

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

<Swiper
// check options at https://swiperjs.com/swiper-api
  options={{
    loop: true,
    autoplay: {
      delay: 700,
      disableOnInteraction: false,
      waitForTransition: false
    }
  }}>
  <SwiperWrapper>
    <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>

Examples

Check the online doc for a fullset of examples, including navigation and thumbnails. Full code is provided.

You can also look at how others are using astro-swiper in public github repo:

• the famous astro template astroplate in the testominial section (cf. What Users Are Saying About Astroplate): autoplay, pagination and breakpoints are used.
• the popular astro template pinwheel-astro is using astro-swiper in several places: testimonial section, signin, password reset and signup pages. Pagination and breakpoints are used.
• the well-known astro template hello-astro uses swiper in the carousel page as well as in blog article. It makes use of navigation arrow, pagination and autoplay.
• bigspring-light-astro astro theme is also using astro-swiper in several places in the main page with customized pagination.
• Women Techmakers organized by GDG Madrid is using pagination and autoplay at different places in their page.
• kando-menu is using astro-swiper with pagination, card effect, and coverflow effect as displayed in kando.menu.
• astroimagej is using pagination with progress bar.
• rustdesk.com makes use of <SwiperLazyPreloader/> to add a preloader element.
• ... and many others such as Cinerama and pfm-landing-page using astro-swiper in the hero section, folex-lite-astro using it in the portfolio page,...

Help needed?

Do you need help to integrate astro-swiper in your astro template / component? I'll be happy to help!

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

Support us

Let's star the project as you like it.