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

      

     

    代码改变了我们,也改变了世界
  • 相关阅读:
    网络七层模型
    border-radius 50% 和100%
    数据绑定
    前端一些基础的重要的知识2
    用 ul 和 li 模拟select控件
    两列布局
    盒子的水平垂直居中几种方法
    TCP时间戳
    帧聚合
    skb buff数据结构
  • 原文地址:https://www.cnblogs.com/wencaiguagua/p/15660384.html
Copyright © 2011-2022 走看看