zoukankan      html  css  js  c++  java
  • swiper按钮点击无效及控制器无效问题

    点击箭头图片切换的同时,下面小图标也会随着切换,同理下面小图标切换时,上面也随着滚动。

    示例代码如下:

       
    <!-- Swiper --> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div> </div> <!-- Add Arrows --> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div> </div> </div> <!-- Swiper JS --> <script src="../dist/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var galleryTop = new Swiper('.gallery-top', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev',
    //改为:

            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
             },

    
            spaceBetween: 10,
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs; //改为controller
        galleryThumbs.params.control = galleryTop;//改为controller
        
        </script>

     但是,在使用时,点击箭头或者下面小图标确无效。

    修改了以上红色地方后,就生效了。

  • 相关阅读:
    【转】RocketMQ事务消费和顺序消费详解
    RocketMQ初探(五)之RocketMQ4.2.6集群部署(单Master+双Master+2m+2s+async异步复制)
    Spring定时器Quartz的使用
    RocketMQ初探(四)之RocketMQ4.x版本可视化管理控制台rocketmq-console-ng搭建(Apache)
    RocketMQ入门(简介、特点)
    RocketMQ初探(二)之RocketMQ3.26版本搭建(含简单Demo测试案例)
    RocketMQ初探(一)
    tomcat详解
    HDFS读写流程
    RabbitMQ
  • 原文地址:https://www.cnblogs.com/colorful-paopao1/p/11622295.html
Copyright © 2011-2022 走看看