Jquery 当centeredSlides设置为false时，Swiper缩略图滑块行为异常

我有两个滑块：左侧的主滑块和作为主滑块缩略图视图的缩略图滑块。但是，缩略图滑块的行为不正确：在第六张或第七张幻灯片前后，缩略图滑块在当前幻灯片之前拾取缩略图，而不是在下一张幻灯片之前拾取缩略图，之后它将保持不动

我尝试将

centeredSlides

选项设置为

true

。然后，缩略图滑块将正常工作。但是，我需要将

centeredSlides

设置为

false

，并且当前活动的缩略图幻灯片必须位于顶部

通过脚本，您可能会更好地理解我的观点，因此：

$（文档）.ready（函数（）{
var productSlider=新开关（'.product slider'{
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
间隔：10
});
var productThumbs=新的Swiper（'.productThumbs'{
间隔：5，
中心幻灯片：错误，
幻灯片视图：4，
接触比：0.2，
slideToClickedSlide:true，
方向：“垂直”
});
productSlider.params.control=productThumbs；
productThumbs.params.control=productSlider；
});
正文{
边缘顶部：30px；
}
.产品滑块{
高度：430px；
盒影：0 0 15px#ECECEC；
}
.产品滑块.刷子滑块{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.产品大拇指{
高度：430px；
}
.产品拇指.滑动滑梯{
宽度：自动；
填充：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.产品拇指.滑动开关处于活动状态{
边框：实心2px#ececc；
}
我找到了一个解决方案，我只是不知道是否可以做得更好。首先，我将
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包装器
a类负边距顶部，如下所示：

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

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


$（文档）.ready（函数（）{
var productSlider=新开关（'.product slider'{
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
间隔：10
});
var productThumbs=新的Swiper（'.productThumbs'{
间隔：5，
中心幻灯片：对，
幻灯片视图：4，
接触比：0.2，
slideToClickedSlide:true，
方向：“垂直”
});
productSlider.params.control=productThumbs；
productThumbs.params.control=productSlider；
});
正文{
边缘顶部：30px；
}
.产品滑块{
高度：430px；
盒影：0 0 15px#ECECEC；
}
.产品滑块.刷子滑块{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.产品大拇指{
高度：430px；
}
/*玩这个。也许您的项目不使用垂直方向
缩略图滑块，但不是水平滑块。你得换个房间
此文件的左边距值*/
.产品拇指.刷子包装{
利润上限：计算（-100%+5px）；
}
.产品拇指.滑动滑梯{
宽度：自动；
填充：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.产品拇指.滑动开关处于活动状态{
边框：实心2px#ececc；
}
您可以为拇指图库设置“宽度”以解决此问题：

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