Swiper.js サムネイルをスライドしないようにしたい

Question

▽現状
Swiper.jsを使用してスライドの動き、スライドとサムネイルの連動までは完成しています。

▽やりたいこと
スライドした際にサムネイルも一緒にスライドしてしますので、
メインのスライドのみスライド処理させてサムネイルはスライドさせずに、
アクティブのクラスだけ移動させたい。
※現在表示中のサムネイルに「swiper-slide-active」がつくので、この動きはそのままで、
スライド機能のみを停止させたい。

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

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

<div id="slide">
<div class="container">
<div class="sample sample06">
  <div class="swiper-container main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/slide01.png"></div>
      <div class="swiper-slide"><img src="images/slide02.png"></div>
      <div class="swiper-slide"><img src="images/slide03.png"></div>
      <div class="swiper-slide"><img src="images/slide04.png"></div>
      <div class="swiper-slide"><img src="images/slide05.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="images/slide01_thumbnails.png"></div>
      <div class="swiper-slide"><img src="images/slide02_thumbnails.png"></div>
      <div class="swiper-slide"><img src="images/slide03_thumbnails.png"></div>
      <div class="swiper-slide"><img src="images/slide04_thumbnails.png"></div>
      <div class="swiper-slide"><img src="images/slide05_thumbnails.png"></div>
    </div>
  </div>
</div>
</div>
</div><!-- #slide_end -->

.swiper-slide {
    opacity: 0.4 !important;
}

.swiper-slide-active {
    opacity: 1 !important;
}

お分かりになる方がいれば教えて頂けないでしょうか？

Answer 1

スライド動作をとめることは難しいですが、renderBulletとか使えば別途作成は出来ます。

【Swiper API #pagination】
https://idangero.us/swiper/api/#pagination

【swiper.jsのthumbnail送りをデモ以外の方法で実現する - WP飽きるまで。】
http://wp.akirumade.com/js-swiper-thumbnail-pagination/

Comments

[Mokn1356]

回答ありがとうございます！
http://wp.akirumade.com/js-swiper-thumbnail-pagination/
に紹介されていたのが、理想に近かったのでやってみようと思います。
希望が見えてきましたありがとうございました