How to use
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.swiper');
})()
</script>
Default
<!-- Swiper -->
<div class="js-swiper swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Swiper -->
Navigation
<!-- Swiper -->
<div class="js-swiper-navigation swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-navigation-button-next"></div>
<div class="js-swiper-navigation-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var navigation = new Swiper('.js-swiper-navigation', {
navigation: {
nextEl: '.js-swiper-navigation-button-next',
prevEl: '.js-swiper-navigation-button-prev',
},
});
})()
</script>
Pagination
<!-- Swiper -->
<div class="js-swiper-pagination swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-pagination-element swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var navigation = new Swiper('.js-swiper-pagination', {
pagination: {
el: '.js-swiper-pagination',
},
});
})()
</script>
Use
.swiper-pagination-light
class for lighter style
Pagination Dynamic
<!-- Swiper -->
<div class="js-swiper-pagination-dynamic swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-pagination-dynamic-element swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var paginationDynamic = new Swiper('.js-swiper-pagination-dynamic', {
pagination: {
el: '.js-swiper-pagination-dynamic-element',
dynamicBullets: true,
},
});
})()
</script>
Pagination Progress
<!-- Swiper -->
<div class="js-swiper-pagination-progress swiper">
<!-- Swiper Pagination -->
<div class="js-swiper-pagination-progress-element swiper-pagination mt-0"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-pagination-progress-button-next"></div>
<div class="js-swiper-pagination-progress-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var paginationProgress = new Swiper('.js-swiper-pagination-progress', {
pagination: {
el: '.js-swiper-pagination-progress-element',
type: 'progressbar',
},
navigation: {
nextEl: '.js-swiper-pagination-progress-button-next',
prevEl: '.js-swiper-pagination-progress-button-prev',
},
});
})()
</script>
Pagination Progress with Thumbs
.swiper-pagination-progress-light
for light version.
<!-- Swiper Main -->
<div class="js-swiper-pagination-progress-with-thumbs-main swiper mb-5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Swiper Main -->
<!-- Swiper Thumbs -->
<div class="js-swiper-pagination-progress-with-thumbs swiper">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide swiper-pagination-progress">
<div class="swiper-pagination-progress-body mb-4">
<div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
</div>
<span>Discover how to build and maintain coding systems using our documentation.</span>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide swiper-pagination-progress">
<div class="swiper-pagination-progress-body mb-4">
<div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
</div>
<span>Start browsing our snippets pages with copy-to-clipboard snippets to match Bootstrap's level of quality.</span>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide swiper-pagination-progress">
<div class="swiper-pagination-progress-body mb-4">
<div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
</div>
<span>Apart from 70+ HTML-pages, the theme comes with 3 ready-to-use and stand-alone demo options.</span>
</div>
<!-- End Slide -->
</div>
</div>
<!-- End Swiper Thumbs -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var paginationProgressWithThumbsThumbs = new Swiper('.js-swiper-pagination-progress-with-thumbs', {
watchSlidesVisibility: true,
watchSlidesProgress: true,
history: false,
breakpoints: {
480: {
slidesPerView: 2,
spaceBetween: 15,
},
768: {
slidesPerView: 3,
spaceBetween: 15,
},
1024: {
slidesPerView: 3,
spaceBetween: 15,
},
},
on: {
'afterInit': function (swiper) {
swiper.el.querySelectorAll('.js-swiper-pagination-progress-body-helper')
.forEach($progress => $progress.style.transitionDuration = `${swiper.params.autoplay.delay}ms`)
}
}
});
var paginationProgressWithThumbsMain = new Swiper('.js-swiper-pagination-progress-with-thumbs-main', {
effect: 'fade',
autoplay: true,
loop: true,
thumbs: {
swiper: paginationProgressWithThumbsThumbs
}
})
})()
</script>
Pagination Fraction
<!-- Swiper -->
<div class="js-swiper-pagination-fraction swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-pagination-fraction-button-next"></div>
<div class="js-swiper-pagination-fraction-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-pagination-fraction-element swiper-pagination swiper-pagination-fraction"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var paginationProgress = new Swiper('.js-swiper-pagination-fraction', {
pagination: {
el: '.js-swiper-pagination-fraction-element',
type: 'fraction',
},
navigation: {
nextEl: '.js-swiper-pagination-fraction-button-next',
prevEl: '.js-swiper-pagination-fraction-button-prev',
},
});
})()
</script>
Vertical
Any vertical sliding need to rely on your element must have a valid height of such conditions, if it is full-screen sliding, this height should be 100%
.
<!-- Swiper -->
<div class="js-swiper-vertical swiper" style="height: 37rem;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Swiper Pagination -->
<div class="js-swiper-vertical-pagination swiper-pagination swiper-pagination-light"></div>
</div>
<!-- End Swiper -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var vertical = new Swiper('.js-swiper-vertical', {
direction: 'vertical',
pagination: {
el: '.js-swiper-vertical-pagination',
clickable: true,
},
});
})()
</script>
Space Between
<!-- Swiper -->
<div class="js-swiper-space-between swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-space-between-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var spaceBetween = new Swiper('.js-swiper-space-between', {
spaceBetween: 30,
pagination: {
el: '.js-swiper-space-between-pagination',
clickable: true,
},
});
})()
</script>
Slides Per View
<!-- Swiper -->
<div class="js-swiper-slides-per-view swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-slides-per-view-button-next swiper-button-next"></div>
<div class="js-swiper-slides-per-view-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-slides-per-view-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var slidesPerView = new Swiper('.js-swiper-slides-per-view', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.js-swiper-slides-per-view-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-slides-per-view-button-next',
prevEl: '.js-swiper-slides-per-view-button-prev',
},
});
})()
</script>
Slides Per View Auto
<!-- Swiper -->
<div class="js-swiper-slides-per-view-auto swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width: 60%">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 60%">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 30%">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 50%">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 20%">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 60%">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-slides-per-view-auto-button-next swiper-button-next"></div>
<div class="js-swiper-slides-per-view-auto-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-slides-per-view-auto-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var slidesPerView = new Swiper('.js-swiper-slides-per-view-auto', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.js-swiper-slides-per-view-auto-pagination',
clickable: true,
},
});
})()
</script>
Responsive Breakpoint
<!-- Swiper -->
<div class="js-swiper-responsive-breakpoint swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-responsive-breakpoint-button-next swiper-button-next"></div>
<div class="js-swiper-responsive-breakpoint-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-responsive-breakpoint-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var responsiveBreakpoint = new Swiper('.js-swiper-responsive-breakpoint', {
slidesPerView: 1,
spaceBetween: 10,
pagination: {
el: '.js-swiper-responsive-breakpoint-pagination',
clickable: true,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 40,
},
1024: {
slidesPerView: 3,
spaceBetween: 50,
},
}
});
})()
</script>
Centered
<!-- Swiper -->
<div class="js-swiper-centered swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-centered-button-next swiper-button-next"></div>
<div class="js-swiper-centered-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-centered-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var centered = new Swiper('.js-swiper-centered', {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: '.js-swiper-centered-pagination',
clickable: true,
},
});
})()
</script>
Centered Auto
<!-- Swiper -->
<div class="js-swiper-centered-auto swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width: 60%">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 60%">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 30%">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 50%">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 20%">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide" style="width: 60%">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-centered-auto-button-next swiper-button-next"></div>
<div class="js-swiper-centered-auto-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-centered-auto-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var centeredAuto = new Swiper('.js-swiper-centered-auto', {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.js-swiper-centered-auto-pagination',
clickable: true,
},
});
})()
</script>
Freemode
<!-- Swiper -->
<div class="js-swiper-freemode swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-freemode-button-next swiper-button-next"></div>
<div class="js-swiper-freemode-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-freemode-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var freemode = new Swiper('.js-swiper-freemode', {
slidesPerView: 3,
spaceBetween: 30,
freeMode: true,
pagination: {
el: '.js-swiper-freemode-pagination',
clickable: true,
},
});
})()
</script>
Infinite Loop
<!-- Swiper -->
<div class="js-swiper-infinite-loop swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-infinite-loop-button-next"></div>
<div class="js-swiper-infinite-loop-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-infinite-loop-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var infiniteLoop = new Swiper('.js-swiper-infinite-loop', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.js-swiper-infinite-loop-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-infinite-loop-button-next',
prevEl: '.js-swiper-infinite-loop-button-prev',
},
});
})()
</script>
Effect Mode
<!-- Swiper -->
<div class="js-swiper-effect-fade swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-effect-fade-button-next"></div>
<div class="js-swiper-effect-fade-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-effect-fade-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var effectFade = new Swiper('.js-swiper-effect-fade', {
spaceBetween: 30,
effect: 'fade',
pagination: {
el: '.js-swiper-effect-fade-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-effect-fade-button-next',
prevEl: '.js-swiper-effect-fade-button-prev',
},
});
})()
</script>
Mousewheel
<!-- Swiper -->
<div class="js-swiper-mousewheel swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-mousewheel-button-next"></div>
<div class="js-swiper-mousewheel-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-mousewheel-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var mousewheel = new Swiper('.js-swiper-mousewheel', {
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.js-swiper-mousewheel-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-mousewheel-button-next',
prevEl: '.js-swiper-mousewheel-button-prev',
},
});
})()
</script>
Autoplay
<!-- Swiper -->
<div class="js-swiper-autoplay swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-autoplay-button-next"></div>
<div class="js-swiper-autoplay-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-autoplay-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var autoplay = new Swiper('.js-swiper-autoplay', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.js-swiper-autoplay-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-autoplay-button-next',
prevEl: '.js-swiper-autoplay-button-prev',
},
});
})()
</script>
Equal Height
“ This is a beautiful template with exciting components and endless features. ”
“ I plan to use Front in many more projects, and almost want to keep it to myself ”
“ Great design and thorough documentation, all backed with amazing support. ”
“ It has many landing page variations to choose from, which one is always a big advantage. ”
“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”
“ This is a beautiful template with exciting components and endless features. ”
<!-- Swiper -->
<div class="js-swiper-equal-height swiper swiper-equal-height">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ I plan to use Front in many more projects, and almost want to keep it to myself ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ Great design and thorough documentation, all backed with amazing support. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote blockquote-sm">“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-equal-height-button-next swiper-button-next"></div>
<div class="js-swiper-equal-height-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-equal-height-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var equalHeight = new Swiper('.js-swiper-equal-height', {
pagination: {
el: '.js-swiper-equal-height-pagination',
clickable: true,
},
breakpoints: {
580: {
slidesPerView: 1,
spaceBetween: 15,
},
768: {
slidesPerView: 2,
spaceBetween: 15,
},
1024: {
slidesPerView: 3,
spaceBetween: 15,
},
}
});
})()
</script>
Auto Height
“ This is a beautiful template with exciting components and endless features. ”
“ I plan to use Front in many more projects, and almost want to keep it to myself ”
“ Great design and thorough documentation, all backed with amazing support. ”
“ It has many landing page variations to choose from, which one is always a big advantage. ”
“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”
“ This is a beautiful template with exciting components and endless features. ”
<!-- Swiper -->
<div class="js-swiper-auto-height swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ I plan to use Front in many more projects, and almost want to keep it to myself ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ Great design and thorough documentation, all backed with amazing support. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote blockquote-sm">“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide">
<!-- Card -->
<div class="card bg-soft-primary-light shadow-none">
<div class="card-body">
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-auto-height-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var autoHeight = new Swiper('.js-swiper-auto-height', {
autoHeight: true, //enable auto height
spaceBetween: 20,
pagination: {
el: '.js-swiper-auto-height-pagination',
clickable: true,
},
});
})()
</script>
Thumbs Gallery
<!-- Swiper Main -->
<div class="js-swiper-gallery-main swiper mb-2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-gallery-button-next swiper-button-next"></div>
<div class="js-swiper-gallery-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper Main -->
<!-- Swiper Thumbs -->
<div class="js-swiper-gallery-thumbs swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Swiper Thumbs -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var galleryThumbs = new Swiper('.js-swiper-gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 3,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.js-swiper-gallery-main', {
spaceBetween: 10,
navigation: {
nextEl: '.js-swiper-gallery-button-next',
prevEl: '.js-swiper-gallery-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
})()
</script>
Preloader
Loading...
<!-- Swiper -->
<div class="js-swiper-preloader swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="Image Description">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="Image Description">
</div>
</div>
<!-- Arrows -->
<div class="js-swiper-preloader-button-next swiper-button-next"></div>
<div class="js-swiper-preloader-button-prev swiper-button-prev"></div>
<!-- Preloader -->
<div class="js-swiper-preloader swiper-preloader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- End Preloader -->
</div>
<!-- End Swiper -->
<!-- Swiper Pagination -->
<div class="js-swiper-preloader-pagination swiper-pagination"></div>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var preloader = new Swiper('.js-swiper-preloader', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.js-swiper-preloader-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-preloader-button-next',
prevEl: '.js-swiper-preloader-button-prev',
},
on: {
'imagesReady': function (swiper) {
const preloader = swiper.el.querySelector('.js-swiper-preloader')
preloader.parentNode.removeChild(preloader)
}
}
});
})()
</script>