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
<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
<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
<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">