swiper5-两个swiper 双向控制

版本

swiper-8.4.6

官网

众多demo 演示地址 https://www.swiper.com.cn/demo/index.html

例子

• 两个swiper 双向绑定

// html
		<div class="list2-swiper" >
                <div class="swiper mySwiper1 mySwiper swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in swiperTxt" :key="item"><p :class="[index==currentIndex?'active-style':'']">{{item}}</p></div>
                	</div>
                </div>
            </div>

            <div class="list-swiper" >
                <div class="swiper mySwiper2 mySwiper swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" ><img  src="xxx.png"></div>
                    <div class="swiper-slide" ><img  src="xxx.png"></div>
                    <div class="swiper-slide" ><img  src="xxx.png"></div>
                    <div class="swiper-slide" ><img  src="xxx.png"></div>
                    <div class="swiper-slide" ><img  src="xxx.png"></div>
                </div>
                  <div class="swiper-pagination"></div>
                </div>
            </div>

// js
        var Swiper2 = new Swiper(".mySwiper2", {
            initialSlide: currentIndex.value,
            slidesPerView: "auto",
            centeredSlides: true,
            spaceBetween: 30,
            pagination: {
            el: ".swiper-pagination",
            clickable: true,
            },
            on:{//swiper 事件
                slideChangeTransitionStart: function(){
                currentIndex.value=this.activeIndex;
              
                },
            },
            
        });

         //tab轮播
         var Swiper1 = new Swiper(".mySwiper1", {
            initialSlide: currentIndex.value,//初始滑块index
            slideToClickedSlide: true,//点击处于容器中心？
            slidesPerView: "auto",// 容器显示的滑块个数
            centeredSlides: true,//滑动位于中心
            spaceBetween: 5,// 滑块间距
      
            controller: {// 双向控制 后声明的swiper控制先声明的swiper ,原因:函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会。你首先需要声明你的类，然后再访问它，否则类似以下的代码将抛出 ReferenceError：
                control: Swiper2,
            },
            on:{//swiper 事件
                // click:function(){
                //     console.log('点击事件',this.activeIndex)
                //     currentIndex.value=this.activeIndex;
                // },
                // touchEnd: function(swiper,event){
                //     console.log('触摸结束',this.activeIndex)
                //     currentIndex.value=this.activeIndex;
                // },
                // slideChangeTransitionStart: function(){
                // currentIndex.value=this.activeIndex;
              
                // },
                slideChangeTransitionEnd: function(){//切换结束时，告诉我现在是第几个slide
                    
                    // console.log('切换结束时，告诉我现在是第几个slide',this.activeIndex)
                    currentIndex.value=this.activeIndex;
                },
            },
        });
        // swiper双向控制
        Swiper1.controller.control = Swiper2;//Swiper1控制Swiper2，需要在Swiper2初始化后
        Swiper2.controller.control = Swiper1;//Swiper2控制Swiper1，需要在Swiper1初始化后

学习

• 双向绑定的方法:两个swiper的当前index使用同一变量控制
• swiper 方法