0

我有两个应该同时滚动的滑动幻灯片。到目前为止它正在工作。但我想反转第二个幻灯片的滚动方向并保持第一个的自然方向。我试图实现这一点，使负转换值为正。但它并没有真正起作用......这是我到目前为止所做的：

代码笔： 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>

4

1 回答 1

2

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

于 2021-05-18T13:12:11.853 回答