拨打电话

Swiper怎样把两个实例关联起来?

发布时间:2023-11-02 16:20
发布者:admin
浏览次数:57

直接举例说明,上例子:

methods: {
  oneswiper() {
    this.$nextTick(() => {
      var swiperbig = new Swiper('.swiper-container-fade', {
        loop: true,
        loopedSlides: 4,
      });
      var swiperthumb = new Swiper('.swiper-container-vertical', {
        spaceBetween: '4%',
        loop: true,
        slidesPerView: 'auto',
        slidesPerView: 3,
        centeredSlides: true,
        loopedSlides: 4,
        direction: 'vertical',
        slideToClickedSlide: true,
        keyboard: {
          enabled: true
        },
        mousewheel: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChange: function () {
            var activeIndex = this.activeIndex;
            var totalSlides = this.slides.length;
            // 判断是否为最后一张图片
            if (activeIndex === totalSlides - 1) {
              // 触发点击事件
              document.querySelector('.swiper-container-vertical .swiper-slide:last-child').click();
            }
          }
        }
      });      
      // 将两个Swiper实例关联起来
      swiperbig.controller.control = swiperthumb;
      swiperthumb.controller.control = swiperbig;
    });
  }
}

代码最后部分:

// 将两个Swiper实例关联起来

swiperbig.controller.control = swiperthumb;

swiperthumb.controller.control = swiperbig;