Swiper slider
Slider for all purposes, it lets you create a beautiful responsive slider.
Add this stylesheet <link> into your page <head> to load the swiper slider css
<link rel="stylesheet" type="text/css" href="assets/vendor/swiper/swiper-bundle.min.css">
Add this <script> above function.js
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
See Swiper Slider example code below:
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
</div>
</div>
Swiper slider Examples
Default slider
<!-- Slider START -->
<div class="swiper" data-swiper-options='{"slidesPerView":1}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
<!-- Slider END -->
Slider with navigation
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"navigation":{
"nextEl":".swiper-button-next",
"prevEl":".swiper-button-prev"
}}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Add pagination and navigation elements here -->
<div class="d-flex justify-content-between position-absolute top-50 start-0 w-100">
<a href="#" class="btn btn-dark btn-icon btn-lg rounded-circle mb-0 swiper-button-prev"><i class="bi bi-arrow-left"></i></a>
<a href="#" class="btn btn-dark btn-icon btn-lg rounded-circle mb-0 swiper-button-next"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- Slider END -->
Slider with pagination
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"pagination":{
"el":".swiper-pagination"
}}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider with Pagination dynamic
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"pagination":{
"el":".swiper-pagination",
"dynamicBullets": true
}}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider with Pagination progress
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"pagination":{
"el":".swiper-pagination",
"type":"progressbar"
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider with Pagination Fraction
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"pagination":{
"el":".swiper-pagination",
"type":"fraction"
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider Autoplay
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"spaceBetween": 30,
"autoplay":{
"delay":"2500",
"disableOnInteraction":"false"
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
<!-- Slider END -->
Slider with Scrollbar
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"scrollbar":{
"el":".swiper-scrollbar",
"hide":"true"
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<!-- Slider END -->
Slider space between
<!-- Slider START -->
<div class="swiper" data-swiper-options='{ "spaceBetween": 50 }'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
<!-- Slider END -->
Slides Per View
<!-- Slider START -->
<div class="swiper" data-swiper-options='{"slidesPerView": 4}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Responsive breakdown
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"slidesPerView":2,
"breakpoints":{
"320":{"slidesPerView":2,"spaceBetween":30},
"480":{"slidesPerView":3,"spaceBetween":30},
"640":{"slidesPerView":2,"spaceBetween":30
}}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider freemode
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"spaceBetween": 30,
"freeMode": true
}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
<!-- Slider END -->
Slider Infinite Loop
<div class="swiper" data-swiper-options='{
"spaceBetween": 30,
"loop": true
}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
Slider Effect fade
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"effect": "fade",
"pagination":{
"el":".swiper-pagination",
"clickable":"true"
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assaets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider Effect cube
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"effect": "cube",
"grabCursor": "true",
"cubeEffect": {
"shadow": true,
"slideShadows": true,
"shadowOffset": 20,
"shadowScale": 0.94
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->
Slider Effect coverflow
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"spaceBetween": 30,
"slidesPerView": "2",
"effect": "coverflow",
"centeredSlides": "true",
"grabCursor": "true",
"coverflowEffect": {
"rotate": 50,
"stretch": 0,
"depth": 100,
"modifier": 1,
"slideShadows": "true"
}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
<!-- Slider END -->
Slider Effect Flip
<div class="swiper" data-swiper-options='{
"effect": "flip",
"grabCursor": "true"
}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
Slider Mousewheel control
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"spaceBetween": 30,
"mousewheel": true
}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
</div>
<!-- Slider END -->
Slider Autoplay with speed
<!-- Slider START -->
<div class="swiper" data-swiper-options='{
"spaceBetween":12,
"loop": true,
"grabCursor": "false",
"autoplay":{"delay":"0","disableOnInteraction": "false"},
"speed":"18000",
"breakpoints":{"320":{"slidesPerView":2,"spaceBetween":20},
"480":{"slidesPerView":3,"spaceBetween":30},
"640":{"slidesPerView":4,"spaceBetween":40
}}}'>
<div class="swiper-wrapper pb-5">
<div class="swiper-slide">
<img src="assets/images/slide/01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/02.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/03.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/04.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/05.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/images/slide/06.jpg" alt="">
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Slider END -->