Swiper
Swiper
Overview Official Website
Swiper is the most modern slider with hardware accelerated transitions and amazing native behavior.
CSS
<!--Swiper slider css-->
<link href="assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
Javascript
<!--Swiper slider js-->
<script src="assets/libs/swiper/swiper-bundle.min.js"></script>
Custom js
<!-- swiper js -->
<script src="assets/js/pages/extended-swiper.js"></script>
Default Swiper
<div class="swiper default-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" >
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" >
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" >
</div>
</div>
</div>
Navigation & Pagination Swiper
Pagination Dynamic Swiper
<div class="swiper pagination-dynamic-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-7.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-8.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-9.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination dynamic-pagination"></div>
</div>
Pagination Fraction Swiper
<div class="swiper pagination-fraction-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-10.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-11.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-12.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
Pagination Custom Swiper
<div class="swiper pagination-custom-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination pagination-custom"></div>
</div>
Pagination Progress Swiper
<div class="swiper pagination-progress-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-7.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
Scrollbar Swiper
<div class="swiper pagination-scrollbar-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-8.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-9.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-10.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-scrollbar"></div>
</div>
Vertical Swiper
<div class="swiper vertical-swiper rounded" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-11.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-12.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Mousewheel Control Swiper
<div class="swiper mousewheel-control-swiper rounded" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Effect Fade Swiper
<div class="swiper effect-fade-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-7.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-8.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Effect Creative Swiper
<!-- Swiper -->
<div class="swiper effect-creative-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-9.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-10.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-11.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Effect Flip Swiper
<!-- Swiper -->
<div class="swiper effect-flip-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-12.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>