swiper及其父级隐藏之后轮播失效问题

最近做了一个项目,用到swiper插件,之前使用都还正常,这次使用莫名其妙出现了轮播失效的问题,经过层层测试,发现是因为tab切换导致轮播图隐藏,再显示的时候轮播就失效了

找到问题就好解决了,网上搜索一番,尝试了一些做法,发现说是因为初始化的原因,每次轮播图显示的时候要重新初始化,当然swiper也有这个方面的参数可以去解决这个问题

   var swiper = new Swiper('.swiper-container', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            paginationClickable: true,
            observer: true, //修改swiper自己或子元素时,自动初始化swiper,主要是这两行
            observeParents: true //修改swiper的父元素时,自动初始化swiper
        });

主要是上面标红的两行,设置自动初始化参数就可以了。。。。

posted @ 2021-02-19 10:50  kingsnowcan  阅读(505)  评论(0编辑  收藏  举报