HTML


<div class="sample sample06">
  <div class="swiper-container main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
    
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <div class="swiper-container thumbnail">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
  </div>
</div>

CSS


.sample06 .main {
  margin-bottom: 10px;
}

.sample06 .thumbnail .swiper-slide {
  cursor: pointer;
  opacity: .7;
}

.sample06 .thumbnail .swiper-slide-active {
  opacity: 1;
}

.sample06 .thumbnail .swiper-wrapper{
  margin-left: calc(-37.5% - 5px);
}

JavaScript


window.addEventListener('DOMContentLoaded', function() {
  var swiper06Main = new Swiper ('.sample06 .main', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10,
  })

  var swiper06Thumb = new Swiper('.sample06 .thumbnail', {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: 4,
    slideToClickedSlide: true
  });
  swiper06Main.params.control = swiper06Thumb;
  swiper06Thumb.params.control = swiper06Main;
}, false);