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

时间：2017-03-02 09:54:20

标签： jquery css thumbnails swiper

我有两个滑块：左侧是主滑块，缩略图滑块是主滑块的缩略图。但是，缩略图滑块的行为不正确：在第六张或第七张幻灯片周围，缩略图滑块选择当前缩略图之前的缩略图，而不是拍摄下一张缩略图，之后它会保持错误状态。

我尝试将centeredSlides选项设置为true。缩略图滑块的行为正确。但是，我需要centeredSlides为false，当前有效的缩略图幻灯片必须是最高的。

你可能会更好地使用脚本，所以这里是：

＆＃13;
＆＃13; 
$(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;
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

任何人都有这方面的解决方案吗？

2 个答案:

答案 0 :(得分：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班级一个负余量顶部，如下：

.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>

答案 1 :(得分：0)

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

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