3.3.1 swiperメイン画像とサムネイルいない同期

Question

で3.3.1 swiper問題は、上に再現：クロム、Firefoxの（他のブラウザをチェックしていない）

私は、右矢印をクリックし、第五の画像に達すると、サムネイルは間違った画像（メイン画像とサムネイル画像はもはや同期していません）にスライドします。私はcenteredSlidesを設定した場合

問題が消える：真（私はそれがセンタリングせずに仕事をしたい）

誰でも助けることができますか？ ここはフィドルですhttps://jsfiddle.net/Paofiddle/5jzk0ojq/4/ P.Sここでは「実行コードスニペット」の中では全く動作していないようですが、フィドルリンクを介して問題を確認できます。

var galleryTop = new Swiper('.gallery-top', { 
 
     nextButton: '.swiper-button-next', 
 
     prevButton: '.swiper-button-prev', 
 
     spaceBetween: 10, 
 
     slidesPerView: 1 
 
    }); 
 
    var galleryThumbs = new Swiper('.gallery-thumbs', { 
 
     spaceBetween: 10, 
 
     slidesPerView: 3, 
 
     slideToClickedSlide: true 
 
    }); 
 
    galleryTop.params.control = galleryThumbs; 
 
    galleryThumbs.params.control = galleryTop;

html, body { 
 
     position: relative; 
 
     height: 100%; 
 
    } 
 
    body { 
 
     background: #000; 
 
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
     font-size: 14px; 
 
     color:#000; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .swiper-container { 
 
     width: 100%; 
 
     height: 300px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    } 
 
    .swiper-slide { 
 
     background-size: cover; 
 
     background-position: center; 
 
    } 
 
    .gallery-top { 
 
     height: 80%; 
 
     width: 100%; 
 
    } 
 
    .gallery-thumbs { 
 
     height: 20%; 
 
     box-sizing: border-box; 
 
     padding: 10px 0; 
 
    } 
 
    .gallery-thumbs .swiper-slide { 
 
     width: 25%; 
 
     height: 100%; 
 
     opacity: 0.4; 
 
    } 
 
    .gallery-thumbs .swiper-slide-active { 
 
     opacity: 1; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/> 
 
<div class="swiper-container gallery-top"> 
 
     <div class="swiper-wrapper"> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div> 
 

 
     </div> 
 
     <!-- Add Arrows --> 
 
     <div class="swiper-button-next swiper-button-white"></div> 
 
     <div class="swiper-button-prev swiper-button-white"></div> 
 
    </div> 
 
    <div class="swiper-container gallery-thumbs"> 
 
     <div class="swiper-wrapper"> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div> 
 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div> 
 

 
     </div> 
 
    </div>

Answer 1

centeredSlidesを使用してみてください。

https://jsfiddle.net/5jzk0ojq/10/

var galleryTop = new Swiper('.gallery-top', { 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     spaceBetween: 10, 
     slidesPerView: 1 
    }); 
var galleryThumbs = new Swiper('.gallery-thumbs', { 
     spaceBetween: 10, 
     slidesPerView: 3, 
     centeredSlides: true, 
     slideToClickedSlide: true 
}); 
galleryTop.params.control = galleryThumbs; 
galleryThumbs.params.control = galleryTop;