Swiper Slider
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>