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>

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

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

  • 相关阅读:
    阿波罗11号登月全套高清照片(16650张,67.1G)分享
    oracle ORA-02292: 违反完整约束条件
    三十六副寺庙对联,领略真正的大智慧!
    SpringCloud微服务架构及其示例
    IDEA怎么关闭暂时不用的工程
    关于解决Incorrect result size: expected 1, actual的问题
    Centos7安装redis6.0.6教程
    VMware安装CentOS7超详细版
    Spring5--@Indexed注解加快启动速度
    《程序员修炼手册》
  • 原文地址:https://www.cnblogs.com/colorful-paopao1/p/11622295.html
Copyright © 2011-2022 走看看