1010 Avenue, New York, NY 10018 US.
Mon-Sat, 8.00-18.00. Sunday CLOSED

Swiper

For more details see Swiper Js 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"><span class="fas fa-chevron-left"></span></div>
    <div class="swiper-button-next"><span class="fas fa-chevron-right"></span></div>
  </div>
</div>
Swiper with thumbnail

This can be simply done by using the attribute. For Swiper with thumbnail use thumb options in your pug/HTML. You can place thumbnail to a specific parent by providing thumbOptions: '#parentID' value in thumb options. Otherwise thumbnail will place after the .swiper element.

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"><span class="fas fa-chevron-left"></span></div>
     <div class="swiper-button-next"><span class="fas fa-chevron-right"></span></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"><span class="fas fa-chevron-left"></span></div>
    <div class="swiper-button-next"><span class="fas fa-chevron-right"> </span></div>
  </div>
</div>
JavaScript
<script src="vendors/swiper/swiper-bundle.min.js"></script>
CSS
<link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet">

Sign up for email alerts

Stay current with our latest insights