Freya | Website, template crafting machine

For more details see Swiper Js documentation⟶

<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/img_1.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/img_2.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/img_3.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/img_1.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/img_2.jpg" alt="image" /></div>
    <div class="swiper-slide"><img class="w-100" src="../assets/img/img_3.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.

<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/blog_header.jpg" alt="image" /></div>
     <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/elements_header.jpg" alt="image" /></div>
     <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/header_3.jpg" alt="image" /></div>
     <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/banner_4.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

<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/banner_4.jpg" alt="image" /></div>
    <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/banner_1.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">