javascript - swiper在开启自动播放后如何在关闭

问题描述

问 题

swiper开启自动播放后在关闭不了,尝试过官方提供的参数设置但没什么用.不知道哪里写错了

代码如下:

   var banner = [];
     for(var b=1;b<$('.banner').length+1;b++){
         banner.push('banner'+b);
         
         banner[b-1] =  new Swiper('.banner'+b, {
                direction: 'horizontal',
                wrapperClass: 'banner-wrapper', // 设置外层的类名
                slideClass: 'banner-slide', // 设置滑块的类名
                slideActiveClass: 'banner-slide-active', // 设置选中滑块的类名
                autoplay: 5000, //自动滑动
                loop: true,
                observer:true,
                observeParents:true,
                pagination: '.swiper-pagination',
                paginationType: 'bullets', // 分页器样式类型
                paginationClickable: true, // 分页器是否可点击
                nested: true, // 禁止父级滑块自动滑动功能
        })
     } 
      
     
     for(bb = 0;bb<$('.banner').length;bb++){
         if(banner[bb].slides.length<=3){
            console.log('执行');
             $('.banner'+(bb+1)).find('.swiper-pagination').remove();
        
             $('.banner'+(bb+1)).find('.banner-slide').addClass('swiper-no-swiping');
             banner[bb].lockSwipes();
             banner[bb].autoplayDisableOnInteraction = true;
             banner[bb].loop = false;
             banner[bb].autoplaying = false;
             banner[bb].autoplayStopOnLast = true;
             banner[bb].paginationHide = false;
             banner[bb].stopAutoplay();
             banner[bb].update();
             
         }
     }

解决方案

最后我通过在实例化之前加一层判断来选择在实例化时要不要添加自动轮播属性
代码:

    if(_self.banner.length > 1){
        var banner = new Swiper('.banner'+(view.activeIndex+1), {
            direction: 'horizontal',
            wrapperClass: 'banner-wrapper', // 设置外层的类名
            slideClass: 'banner-slide', // 设置滑块的类名
            slideActiveClass: 'banner-slide-active', // 设置选中滑块的类名
            autoplay: 5000, //自动滑动
            loop: true,
            observer:true,
            pagination: '.swiper-pagination',
            paginationType: 'bullets', // 分页器样式类型
            paginationClickable: true, // 分页器是否可点击
            nested: true, // 禁止父级滑块自动滑动功能
        })
    }else{
        var banner = new Swiper('.banner'+(view.activeIndex+1), {
            direction: 'horizontal',
            wrapperClass: 'banner-wrapper', // 设置外层的类名
            slideClass: 'banner-slide', // 设置滑块的类名
            slideActiveClass: 'banner-slide-active', // 设置选中滑块的类名
            /*autoplay: 5000, //自动滑动
*/                            loop: true,
            observer:true,
            pagination: '.swiper-pagination',
            paginationType: 'bullets', // 分页器样式类型
            paginationClickable: true, // 分页器是否可点击
            nested: true, // 禁止父级滑块自动滑动功能
        })
    }

这篇关于javascript - swiper在开启自动播放后如何在关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！