在用swiper框架的时候，怎样在第一屏的时候，阻止滑动事件，

最新推荐文章于 2025-06-25 10:18:47 发布

x原力觉醒

最新推荐文章于 2025-06-25 10:18:47 发布

阅读量5.8k

点赞数

本文介绍了使用Swiper实现轮播图的配置方法，包括自动播放、分页导航及触摸交互控制等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            autoplay : 3000,
            //autoplayDisableOnInteraction : false, //触碰该滑块自动轮播就会停止
            paginationClickable: true,
            onInit: function(swiper){
              swiper.lockSwipeToPrev();
            },
            onSlidePrevEnd: function(swiper){
                swiper.unlockSwipeToNext();
                if(swiper.activeIndex==0){
                    swiper.lockSwipeToPrev();
                }
            },
            onSlideNextEnd: function(swiper){
                swiper.unlockSwipeToPrev();
                if(swiper.isEnd){
                    swiper.lockSwipeToNext();
                }
            }

});

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    autoplay : 3000,
    //autoplayDisableOnInteraction : false, //触碰该滑块自动轮播就会停止
    paginationClickable: true,
    onTouchStart: function(swiper,even){
        swiper.unlockSwipeToPrev();
        swiper.unlockSwipeToNext();
        if(swiper.isEnd){
            swiper.lockSwipeToNext();
        }
        else if(swiper.activeIndex==0){
            swiper.lockSwipeToPrev();
        }
    }
});