Question

我正在尝试使用Swiper幻灯片进行三向控制。

我的意思是说3路。有一个双向控件http://idangero.us/swiper/demos/23-thumbs-gallery.html示例，但我需要第三行内容。可能有人有这个主意吗？

我做了第3行，

  var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      spaceBetween: 10,
  });
  var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
  });
  var galleryTabs = new Swiper('.swiper-tabs',{
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
  });

galleryThumbs.params.control = galleryTop;
galleryTop.params.control = galleryThumbs;
galleryTabs.params.control = galleryTop;

但是当用户仅滚动galleryTop时，第三行会滑动。当用户滚动galleryThumbs时，第3行没有变化当用户滚动第3行时，幻灯片galleryTop和galleryThumbs

Answer 1

我通过将onSlideChangeStart的听众添加到我的galleryTop来解决这个问题 - 它滑动了＃34;第三轮＆＃34;到活跃的索引。反过来说，一旦用户在第三个刷卡上滑动，另外两个实例将滑动到该第三个刷卡的活动索引。在理论上写这个有点令人困惑，所以这里是代码。我离开了params.control - 任务，以表明共存是可能的。但我想通过onSlideChange事件完全解决这个问题更为清晰。

 var galleryTop = new Swiper('.gallery-top', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 10,
  onSlideChangeStart: function(){
                galleryTabs.slideTo(galleryTop.activeIndex);
            }    
  });

  var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
  });
  var galleryTabs = new Swiper('.swiper-tabs',{
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      onSlideChangeStart: function(){
                galleryTop.slideTo(galleryTabs.activeIndex);
                galleryThumbs.slideTo(galleryTabs.activeIndex);
            }   
  });

galleryThumbs.params.control = galleryTop;
galleryTop.params.control = galleryThumbs;

Answer 2

滑块的每个下一个实例都应由前一个控制：

let file = (document.getElementById("txt") as HTMLInputElement).value;
// or
let file = (<HTMLInputElement>document.getElementById("txt")).value;

使用Swiper滑块

2 个答案: