zoukankan      html  css  js  c++  java
  • swiper中的双向控制器不生效问题

    <!-- 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

      

     

    代码改变了我们,也改变了世界
  • 相关阅读:
    工作中用到知识点
    工作中遇到问题的解决办法
    透明度兼容性(ie8以上)
    js阻止浏览器默认行为
    js停止冒泡和阻止浏览器默认行为
    js添加事件通用方法
    jquery常用插件
    延迟加载、异步加载js
    JavaScript兼容性问题
    创建对象的一种方式&一种继承机制(代码实例)
  • 原文地址:https://www.cnblogs.com/wencaiguagua/p/15660384.html
Copyright © 2011-2022 走看看