Swiper中文论坛

标题: 求助，左右按钮点击不生效 [打印本页]

作者: 陈鹏 时间: 2018-7-5 10:01
标题: 求助，左右按钮点击不生效
如题，设置了左右移动按钮之后，在点击的时候会偶尔出现点击没有反应或者点击多次才生效，有哪位技术大牛有遇到过这种问题，
设置部分：
         this.$nextTick(() => {
            let bannerSwiper = new Swiper('#bannerSwiper', {
               pagination: '.swiper-pagination',
               paginationClickable: true,
               observer:true,//修改swiper自己或子元素时，自动初始化swiper
               observeParents:true,//修改swiper的父元素时，自动初始化swiper
               slidesPerView: 1.5,
               centeredSlides: true,
               prevButton: '.swiper-btn-prev',
               nextButton: '.swiper-btn-next',
               spaceBetween: 7,
               loop: true,
               autoplayDisableOnInteraction : false,
               loopedSlides: this.listImg.length,
               speed: 600,
               autoplay: 5000,
               onTouchEnd: function() {
                     bannerSwiper.startAutoplay();
               }
            });
         });

页面部分：
      <div class="swiper-container fl" id="bannerSwiper">
      <div class="swiper-wrapper" @click="bannerClick($event)">
         <div class="swiper-slide" v-for="(banner,key) in listImg" >
            <img class="psd banner" v-bind:src="banner.pic | pic" @error="errorImg($event, 1)"/>
         
            <p class="bannerBottomText">{{banner.info}}</p>
         </div>
      </div>
      <div class="change_baner_btn">
         <img class="swiper-btn-prev" src="//image.kuwo.cn/newvip/vipzone/v1/vipzone_pc-img-prev.png" />
         <img class="swiper-btn-next" src="//image.kuwo.cn/newvip/vipzone/v1/vipzone_pc-img-next.png" />
      </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
      </div>

作者: 本斯本 时间: 2018-7-5 14:06
改成：
let bannerSwiper = new Swiper('#bannerSwiper', {
               pagination: '.swiper-pagination',
               paginationClickable: true,
               observer:true,//修改swiper自己或子元素时，自动初始化swiper
               observeParents:true,//修改swiper的父元素时，自动初始化swiper
               slidesPerView: 1.5,
               centeredSlides: true,
               //prevButton: '.swiper-btn-prev',
               //nextButton: '.swiper-btn-next',
               navigation: {
                     nextEl: '.swiper-button-next',
                     prevEl: '.swiper-button-prev'
               },
               spaceBetween: 7,
               loop: true,
               autoplayDisableOnInteraction : false,
               loopedSlides: this.listImg.length,
               speed: 600,
               autoplay: 5000,
               onTouchEnd: function() {
                     bannerSwiper.startAutoplay();
               }
            });
         });

作者: 陈鹏 时间: 2018-7-6 11:24

本斯本发表于 2018-7-5 14:06
改成：
let bannerSwiper = new Swiper('#bannerSwiper', {
pagination: '.swiper-pag ...

好的，谢谢，我试试，另外问下如果想通过debug去调试该怎么调试，我们使用的不都是swiper.min.js，这种情况下该怎么调试

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)