首页 > 其他 > 详细

swiper按钮点击无效及控制器无效问题

时间:2019-10-04 15:55:55      阅读:110      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

 

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

示例代码如下:

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

 

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

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

 

swiper按钮点击无效及控制器无效问题

原文:https://www.cnblogs.com/colorful-paopao1/p/11622295.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!