swiper页面刷新布局和指示点错乱


swiper轮播时,用到定时请求后台数据的场景,造成页面刷新时轮播图的指示点和轮播内容错乱。

解决方法是:

声明一个全局变量,轮播时进行销毁  这里我是把轮播为方法

var mySwiper = 0; 
               function play(){
                            if (mySwiper !== 0) {
                                mySwiper.destroy();
                            }
                            mySwiper = new Swiper('.swiper-container', {
                                observer: true,
                                observeParents: true,
                                // direction: 'vertical', // 垂直切换选项
                                loop: true, // 循环模式选项
                                autoplay: {
                                    delay: 3000,
                                    stopOnLastSlide: false,
                                    disableOnInteraction: false,
                                },
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true
                                },
                                // 如果需要前进后退按钮
                                navigation: {
                                    nextEl: '.next',
                                    prevEl: '.prev'
                                },
                            })
                        }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM