同时滚动两个滑动滑块幻灯片

Question

我有两个滑动幻灯片，应该同时滚动。到目前为止，它正在发挥作用。但我想反转第二张幻灯片的滚动方向，并保持第一张幻灯片的自然方向。我试图实现这一点，使消极的翻译价值为积极的。但它并没有真正起作用。。。以下是我迄今为止所做的：

代码笔：https://codepen.io/Dennisade/pen/eaRLZW

var numItems = $('.swiper-slide').length;
var imageSlider = new Swiper(".image-slider", {
loopedSlides: numItems,
loop: true,
slidesPerView: "auto",
freeMode: true,
mousewheel: {
releaseOnEdges: true,
}
});
var overlay = new Swiper(".overlay", {
loopedSlides: numItems,
loop: true,
slidesPerView: "auto",
freeMode: true,
reverseDirection: true,
mousewheel: {
releaseOnEdges: true,
invert:true,
},
});
imageSlider.on('setTranslate', function onSliderMove() {
var scrollValue = this.translate;
overlay.setTranslate(scrollValue);
});

.swiper-container,
.swiper-wrapper {
height: 50vh;
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
}
.swiper-wrapper {
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
}
.swiper-slide {
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
width: auto;
}
.swiper-slide img {
max-width: auto;
max-height: 100%;
}
.thumbContainer img {
display: block;
max-width: auto;
width:100%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css" rel="stylesheet"/>
<div class="image-text">Value</div>
<div class="swiper-container image-slider">
<div class="swiper-wrapper overlay-wrapper">

<div class="swiper-slide">
<div class="thumbContainer">
<img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
</div>
</div>

<div class="swiper-slide">
<div class="thumbContainer">
<img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
</div>
</div>

<div class="swiper-slide">
<div class="thumbContainer">
<img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
</div>
</div>

</div>
</div>
<div class="swiper-container overlay">
<div class="swiper-wrapper">

<div class="swiper-slide">
<div class="thumbContainer">
<img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
</div>
</div>

<div class="swiper-slide">
<div class="thumbContainer">
<img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
</div>
</div>

<div class="swiper-slide">
<div class="thumbContainer">
<img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
</div>
</div>

</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您可以使用slidesPerGroup属性对多张幻灯片进行分组，这允许您一次滚动多张幻灯片。为了更深入地理解它，以及如何定制它，请参阅此处的API文档Swiper API