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;