Sliders
Swiper Slider
Swiper Slider requires swiper-bundle.min.css to be loaded in the <head> part of the html file, swiper-bundle.min.js to be loaded at the bottom fo the file just before the closing </body> tag and the sliders must be initialized, the init-scripts are all included in the code tab of each slider from below.
<div id="default-swiper" class="swiper-container pagination-down">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/images/ph-square.jpg" alt="" class="rounded">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/ph-square.jpg" alt="" class="rounded">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/ph-square.jpg" alt="" class="rounded">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/ph-square.jpg" alt="" class="rounded">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/ph-square.jpg" alt="" class="rounded">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/ph-square.jpg" alt="" class="rounded">
</div><!-- / swiper-slide -->
</div><!-- / swiper-wrapper -->
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div><!-- / default-swiper -->
<!-- swiper-init -->
<script>
var swiper = new Swiper('#default-swiper', {
slidesPerView: 3,
spaceBetween: 15,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
'@0.25': {
slidesPerView: 1,
},
'@0.5': {
slidesPerView: 2,
},
'@1.00': {
slidesPerView: 3,
},
}
});
</script>
Logo Swiper with Autoplay
<div id="logo-swiper" class="swiper-container swiper-grayscale">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/images/logos/logo1.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo2.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo3.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo4.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo5.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo6.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo7.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo8.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo9.png" alt="">
</div><!-- / swiper-slide -->
<div class="swiper-slide">
<img src="../assets/images/logos/logo10.png" alt="">
</div><!-- / swiper-slide -->
</div><!-- / swiper-wrapper -->
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div><!-- / logo-swiper -->
<!-- swiper-init -->
<script>
var swiper = new Swiper('#logo-swiper', {
slidesPerView: 5,
spaceBetween: 60,
loop: true,
speed: 1200,
pagination: false,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
breakpoints: {
'@0.25': {
slidesPerView: 2,
},
'@0.5': {
slidesPerView: 3,
},
'@1.00': {
slidesPerView: 5,
},
}
});
</script>
Fullwidth
<div id="fullwidth-swiper" class="swiper-container rounded">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
<div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
<div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
</div><!-- / swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-pagination"></div>
</div><!-- / fullwidth-swiper -->
<!-- swiper-init -->
<script>
var swiper = new Swiper('#fullwidth-swiper', {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
keyboard: true,
});
</script>
Fullwidth with Arrows
<div id="fullwidth-nav-swiper" class="swiper-container rounded">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
<div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
<div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
</div><!-- / swiper-wrapper -->
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div><!-- / fullwidth-nav-swiper -->
<!-- swiper-init -->
<script>
var swiper = new Swiper('#fullwidth-nav-swiper', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
keyboard: true,
});
</script>
Flow Swiper
<div id="flow-swiper" class="flow-swiper swiper-container pagination-down">
<div class="swiper-wrapper">
<div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
<div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
<div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
<div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
<div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
<div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
</div><!-- / swiper-wrapper -->
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div><!-- / flow-swiper -->
<!-- swiper-init -->
<script>
var swiper = new Swiper('#flow-swiper', {
effect: 'coverflow',
grabCursor: true,
loop: true,
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
breakpoints: {
'@0.25': {
centeredSlides: true,
slidesPerView: "auto",
},
'@0.75': {
centeredSlides: false,
slidesPerView: 3,
},
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
Vertical Swiper
<div id="vertical-swiper" class="vertical-swiper swiper-container rounded">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(../assets/images/ph-bg.jpg)"></div>
<div class="swiper-slide" style="background-image:url(../assets/images/ph-bg.jpg)"></div>
<div class="swiper-slide" style="background-image:url(../assets/images/ph-bg.jpg)"></div>
</div><!-- / swiper-wrapper -->
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div><!-- / vertical-swiper -->
<!-- swiper-init -->
<script>
var swiper = new Swiper('#vertical-swiper', {
direction: 'vertical',
slidesPerView: 1,
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>





