<!-- Swiper --> <div class="swiper mySwiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="image/hotel.png" /></div> </div> <div class="swiper-button-next"> </div> <div class="swiper-button-prev"> </div> </div> <div class="swiper mySwiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="image/hotel.png" /></div> </div> </div> <p> <script type="text/javascript">// <![CDATA[ var Swiper1 = new Swiper(".mySwiper1", { loop: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); var Swiper2 = new Swiper(".mySwiper2", { loop: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); Swiper1.controller.control = Swiper2;//需要在Swiper2初始化后,Swiper1控制Swiper2 Swiper2.controller.control = Swiper1;//需要在Swiper1初始化后,Swiper2控制Swiper1 // ]]></script> </p>
代码格式懒得整理了,swiper双向控制要注意的一点就是
Swiper1.controller.control = Swiper2;
Swiper2.controller.control = Swiper1;
官方文档中,需要把params改成controller
其他不变即可
下方为官方文档:
Swiper1.params.control = Swiper2;//需要在Swiper2初始化后,Swiper1控制Swiper2
Swiper2.params.control = Swiper1;//需要在Swiper1初始化后,Swiper2控制Swiper1