Swiper

Official Docs

Default

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Navigation

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Pagination

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Progress

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Scrollbar

Slide 5

Slide 1

Slide 2

Slide 3

Slide 4

Slide 6

Vertical

Slide 6

Slide 5

Slide 1

Slide 2

Slide 3

Slide 4

Nested

Horizontal Slide 1

Vertical Slide 1

Vertical Slide 2

Vertical Slide 3

Vertical Slide 4

Vertical Slide 5

Horizontal Slide 3

Horizontal Slide 4

Autoplay

Slide 5

Slide 1

Slide 2

Slide 3

Slide 4

Slide 6

Thumbs Gallery

Uses Instruction
Swiper is delivered primarily via npm. npm i swiper
Add the following line into the <head> of each template or page that you want to use swiper on.
```

<link rel="stylesheet" href="./../assets/vendors/swiper/swiper-bundle.min.css">
```

Add the following lines before the <body> of each template or page that you want to use swiper on.


<!-- Swiper JS -->
<script src="./../assets/vendors/swiper/swiper-bundle.min.js"></script>

<!-- Swiper Initialize JS -->
<script src="./../assets/js/components/extended/swiper-init.min.js"></script>

For full documentation please visit the link: https://swiperjs.com/

Swiper

Default

Navigation

Pagination

Progress

Scrollbar

Vertical

Nested

Autoplay

Thumbs Gallery

Uses Instruction