astro-swiper

Install

npm install astro-swiper
pnpm add astro-swiper
bun 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.

Note that if ones does not want to use the default swiper class swiper-button-prev and swiper-button-next to use its own css, it is possible to use

<SwiperButtonPrev addDefaultClass={false} class='my-swiper-button-prev'/>

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>

How others are using astro-swiper

Here is how others are using astro-swiper, as found 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
• … 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,…

Swiperjs demo

Here is how swiperjs.com demos are implemented with astro-swiper:

Full Astro Code

Default Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Navigation Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Pagination Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Pagination Dynamic Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Pagination Progress Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Pagination Fraction Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Pagination Custom Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Scrollbar Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Vertical Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Space Between Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Slides Per View Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Slides Per View Auto Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Centered Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Centered Auto Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Css Mode Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Free Mode Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Scroll Container Demo

Vertical Scroll Demo from SwiperJS

Slide 3

Slide 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.

Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Grid Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Nested Demo

Demo from SwiperJS

Full Astro Code

Vertical Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Grab Cursor Demo

Demo from SwiperJS

Full Astro Code

Vertical Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Infinite Loop Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Slides Per Group Skip Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Effect Fade Demo

Demo from SwiperJS

Full Astro Code

Effect Cube Demo

Demo from SwiperJS

Full Astro Code

Effect Cover Flow Demo

Demo from SwiperJS

Full Astro Code

Effect Flip Demo

Demo from SwiperJS

Full Astro Code

Effect Cards Demo

Demo from SwiperJS

Full Astro Code

Effect Creative Demo

Demo from SwiperJS

Full Astro Code

Keyboard Control Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Mousewheel Control Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Autoplay Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Autoplay Progress Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Manipulation Demo

Demo from SwiperJS

Slide 3

Slide 4

Prepend 2 Slides Prepend Slide Append Slide Append 2 Slides

Full Astro Code

Thumbs Gallery Demo

Demo from SwiperJS

Full Astro Code

Thumbs Gallery Demo

Demo from SwiperJS

Full Astro Code

Thumbs Gallery Loop Demo

Demo from SwiperJS

Full Astro Code

Thumbs Gallery Loop Demo

Demo from SwiperJS

Full Astro Code

Hash Navigation Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

History Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Rtl Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Parallax Demo

Demo from SwiperJS

Slide 3

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.

Slide 4

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.

Slide 5

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.

Full Astro Code

Lazy Load Images Demo

Demo from SwiperJS

Full Astro Code

Responsive Breakpoints Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Ratio Breakpoints Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Autoheight Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Zoom Demo

Double-click on the image to zoom in Demo from SwiperJS

Full Astro Code

Virtual Slides Demo

Demo from SwiperJS

Prepend 2 Slides Slide 1 Slide 250 Slide 500 Append Slide

DemoSlideableMenu Demo

WORK IN PROGRESS

Full Astro Code

Change Direction Demo

Resize to dynamically change the swiper's direction. Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Full Astro Code

Rewind Demo

Demo from SwiperJS

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

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.