Swiper

These modular elements can be readily used and customized in every layout across pages.

For more detail see, Swiper Documentation

image
image
image
image
image
image
image
image
image
image
image
image
<div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":30,"loop":true,"slidesPerView":1,"breakpoints":{"670":{"slidesPerView":2},"1200":{"slidesPerView":3}}}'>
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-1.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-7.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-3.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-4.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-5.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-6.jpg" alt="image" /></div>
  </div>
  <div class="swiper-nav">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
Swiper with thumbnail
image
image
image
image
image
image
image
image
image
<div class="swiper theme-slider" data-swiper='{"spaceBetween":5,"loop":true,"loopedSlides":5,"thumb":{"spaceBetween":5,"slidesPerView":5,"loop":true,"freeMode":true,"grabCursor":true,"loopedSlides":5,"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true},"slideToClickedSlide":true}'>
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img class="img-fluid" src="../assets/img/interior-1.jpg" alt="image" /></div>
    <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/interior-4.jpg" alt="image" /></div>
    <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/interior-6.jpg" alt="image" /></div>
  </div>
  <div class="swiper-nav">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
Swiper without thumbnail
image
image
image
image
image
image
image
image
image
image
image
image
<div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true}'>
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="image" /></div>
    <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/07-f.jpg" alt="image" /></div>
    <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/09-f.jpg" alt="image" /></div>
    <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/10-f.jpg" alt="image" /></div>
  </div>
  <div class="swiper-nav">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
JavaScript
<script src="vendors/swiper/swiper-bundle.min.js"></script>
CSS
<link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet">