Overview Official Website
Swiper is the most modern slider with hardware accelerated transitions and amazing native behavior.
Usage
Swiper Slider's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.
Default Swiper #
Use data-swiper="default" attribute to set a default swiper.
<!-- Default Swiper -->
<div class="swiper rounded" data-swiper="default">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
</div>
</div>
</div>
Navigation & Pagination Swiper #
Use data-swiper="navigation" attribute to set a swiper with navigation and pagination.
<!-- Navigation & Pagination Swiper -->
<div class="swiper rounded" data-swiper="navigation">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
Pagination Dynamic Swiper #
Use data-swiper="dynamic" attribute to set a swiper with dynamic and pagination.
<!-- Pagination Dynamic Swiper -->
<div class="swiper rounded" data-swiper="dynamic">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination dynamic-pagination"></div>
</div>
Effect Fade Swiper #
Use data-swiper="effect-fade" attribute to set a swiper with fade effect.
<!-- Effect Fade Swiper -->
<div class="swiper rounded" data-swiper="effect-fade">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Effect Creative Swiper #
Use data-swiper="creative" attribute to set a swiper with creative custom effect.
<!-- Effect Creative Swiper -->
<div class="swiper" data-swiper="creative">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Effect Flip Swiper #
Use data-swiper="flip" attribute to set a swiper with flip custom effect.
<!-- Effect Flip Swiper -->
<div class="swiper" data-swiper="flip">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Scrollbar Swiper #
Use data-swiper="scrollbar" attribute to set a swiper with scrollbar pagination.
<!-- Scrollbar Swiper Swiper -->
<div class="swiper" data-swiper="scrollbar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-scrollbar"></div>
</div>
Vertical Swiper #
Use data-swiper="vertical" attribute to set a swiper with vertical pagination.
<!-- Vertical Swiper -->
<div class="swiper" data-swiper="vertical" style="height: 320px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Mousewheel Control Swiper #
Use data-swiper="mousewheel" attribute to set a swiper with mousewheel scroll.
<!-- Mousewheels Swiper -->
<div class="swiper rounded" data-swiper="mousewheel" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
Responsive Breakpoints Swiper #
Use data-swiper="responsive" attribute to set a responsive swiper.
<!-- Responsive Breakpoints Swiper -->
<div class="swiper rounded gallery-light pb-4" data-swiper="responsive">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="swiper-pagination swiper-pagination-dark"></div>
</div>