Skip to content
astro-dev

astro-swiper

The Astro component for Swiper.
Swiper is a slider/carousel written in TypeScript.
astro-swiper astro-swiper swiper

Install

Terminal window
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>
Full Astro Code
Default Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Navigation Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Pagination Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Pagination Dynamic Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Pagination Progress Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Pagination Fraction Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Pagination Custom Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Scrollbar Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Vertical Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Space Between Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Slides Per View Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Slides Per View Auto Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Centered Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Centered Auto Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Css Mode Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Free Mode Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
DemoScrollContainer Demo

WORK IN PROGRESS
Full Astro Code
Grid Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Nested Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Vertical Demo
Slide 1
Demo using Vanilla js
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
Slide 1
Demo using Vanilla js
Full Astro Code
Vertical Demo
Slide 1
Demo using Vanilla js
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
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
DemoSlidesPerGroupSkip Demo

WORK IN PROGRESS
Full Astro Code
Effect Fade Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Effect Cube Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Effect Cover Flow Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Effect Flip Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Effect Cards Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Effect Creative Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Keyboard Control Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Mousewheel Control Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Autoplay Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Autoplay Progress Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
DemoManipulation Demo

WORK IN PROGRESS
Full Astro Code
Thumbs Gallery Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Thumbs Gallery Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Thumbs Gallery Loop Demo
Slide 1
Demo using Vanilla js
Full Astro Code
Thumbs Gallery Loop Demo
Slide 1
Demo using Vanilla js
DemoMultipleSwipers Demo

WORK IN PROGRESS
Full Astro Code
Hash Navigation Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
History Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Full Astro Code
Rtl Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
DemoParallax Demo

WORK IN PROGRESS
DemoLazyLoadImages Demo

WORK IN PROGRESS
DemoResponsiveBreakpoints Demo

WORK IN PROGRESS
DemoRatioBreakpoints Demo

WORK IN PROGRESS
DemoAutoheight Demo

WORK IN PROGRESS
DemoZoom Demo

WORK IN PROGRESS
DemoVirtualSlides Demo

WORK IN PROGRESS
DemoCustomPlugin Demo

WORK IN PROGRESS
DemoSlideableMenu Demo

WORK IN PROGRESS
DemoChangeDirection Demo

WORK IN PROGRESS
DemoWatchSlidesVisibility Demo

WORK IN PROGRESS
Full Astro Code
Rewind Demo
Slide 1
Demo using Vanilla js
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9