swiper 左右按钮失效原因之初始状态影响

最新推荐文章于 2024-06-27 15:08:17 发布

奔跑在前端路上的小白

最新推荐文章于 2024-06-27 15:08:17 发布

阅读量7.8k

点赞数 5

文章标签： swiper js

本文链接：https://blog.csdn.net/qq_37154178/article/details/102837987

版权

问题：首先实例化后根据业务需要在划过某个位置才显示组件，所以初始化就是隐藏状态的情况下，即使在显示出来还是失效状态。

解决方法：必须初始化状态为显示状态才可以正常使用，之后再显隐也不影响功能。

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 4,
    centeredSlides: true,
    loopAdditionalSlides: 100,
    paginationClickable: true,
    spaceBetween: 30,
    grabCursor: true,
    keyboardControl: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        slideChangeTransitionEnd: function(){
            if(this.isEnd){
                this.navigation.$nextEl.css('display','none');
            }else{
                this.navigation.$nextEl.css('display','block');
            }
        },
    },
});