当 centeredSlides 设置为 false 时，Swiper 缩略图滑块表现奇怪

Question

我有两个滑块：左侧的主滑块和用作主滑块缩略图视图的缩略图滑块。然而，缩略图滑块的行为不正确：在第六张或第七张幻灯片周围，缩略图滑块选择了当前一张之前的缩略图，而不是下一张，之后它仍然存在错误。

我尝试将 centeredSlides 选项设置为 true。然后缩略图滑块的行为正确。但是，我需要 centeredSlides 为 false，并且当前活动的缩略图幻灯片必须位于顶部。

你可能会用脚本更好地理解我的观点，所以这里是：

$(document).ready(function() {
  var productSlider = new Swiper('.product-slider', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10
  });
  var productThumbs = new Swiper('.product-thumbs', {
    spaceBetween: 5,
    centeredSlides: false,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical'
  });
  productSlider.params.control = productThumbs;
  productThumbs.params.control = productSlider;
});

body {
  margin-top: 30px;
}
.product-slider {
  height: 430px;
  box-shadow: 0 0 15px #ECECEC;
 }
 
.product-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs {
  height: 430px;
}

.product-thumbs .swiper-slide {
  width: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs .swiper-slide-active {
  border: solid 2px #ECECEC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa fa-chevron-left"></i>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="swiper-container product-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

有人对此有任何解决方案吗？

Answer 1

我找到了解决方案，只是不知道是否可以做得更好。首先，我将 centeredSlides 选项设置为 true，如下所示：

var productThumbs = new Swiper('.product-thumbs', {
  spaceBetween: 5,
  centeredSlides: true, // changed this from false to true
  slidesPerView: 4,
  touchRatio: 0.2,
  slideToClickedSlide: true,
  direction: 'vertical'
});

然后我给 .swiper-wrapper class 一个负边距顶部，像这样：

.product-thumbs .swiper-wrapper {
  margin-top: calc(-100% + 5px); /* Added this... adjust to your needs */
}

现在滑块可以正常工作了。 .swiper-wrapper 的负边距似乎取决于您的其他样式。我的项目的边距是正确的（因此最上面的缩略图图像与主滑块的顶部边缘对齐），在下面的示例中，您可以使用 margin-top 值！

$(document).ready(function() {
  var productSlider = new Swiper('.product-slider', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10
  });
  var productThumbs = new Swiper('.product-thumbs', {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical'
  });
  productSlider.params.control = productThumbs;
  productThumbs.params.control = productSlider;
});

body {
  margin-top: 30px;
}
.product-slider {
  height: 430px;
  box-shadow: 0 0 15px #ECECEC;
 }
 
.product-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs {
  height: 430px;
}

/* Play around with this. Maybe your project does not use a vertical
thumbnail slider, but instead a horizontal one. You'd have to change the
margin-left values for this */
.product-thumbs .swiper-wrapper {
  margin-top: calc(-100% + 5px);
}

.product-thumbs .swiper-slide {
  width: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-thumbs .swiper-slide-active {
  border: solid 2px #ECECEC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-10">
      <div class="swiper-container product-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/300/300/nature/10">
          </div>
        </div>
        <div class="swiper-button-next">
          <i class="fa fa-chevron-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa fa-chevron-left"></i>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="swiper-container product-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
          <div class="swiper-slide">
            <img src="http://lorempixel.com/90/90/nature/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以将'width'设置为您的拇指图库来解决问题：

var datesSwiper = new Swiper('[data-name="history-years"]', {
    width: 100,
    slidesPerView: 'auto',
    slideToClickedSlide: true,
    slideActiveClass: 'history__year_active'
});

当 centeredSlides 设置为 false 时，Swiper 缩略图滑块表现奇怪

Swiper thumbnail slider behaving odd when centeredSlides is set to false

css

jquery

thumbnails

swiper