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'                                 },                             })                         }
上一篇:在同一个页面使用多个swiper,多个轮播出现冲突的问题?


下一篇:最好用的轮播插件——Swiper