刷卡3.3.1主圖像和縮略圖不同步

Question

刷卡3.3.1 問題重現了：鉻，火狐（還沒有檢查其他瀏覽器）

當我點擊右邊箭頭，達到5圖像，縮略圖滑動到錯誤的圖像（主圖像和縮略圖圖像不再同步）。如果我設置centeredSlides

的問題就消失了：真實的（但我希望它沒有中心工作）

誰能幫助？ 這裏是一個小提琴https://jsfiddle.net/Paofiddle/5jzk0ojq/4/ P.S在這裏的「run code snippet」thingy中似乎沒有任何作用，但你可以通過小提琴鏈接看到問題。

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;