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'
                                },
                            })
                        }

相关文章:

  • 2022-12-23
  • 2021-09-20
  • 2021-11-30
  • 2022-12-23
  • 2021-12-05
  • 2022-12-23
  • 2022-02-09
  • 2022-12-23
猜你喜欢
  • 2021-12-13
  • 2021-11-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-26
  • 2021-11-30
相关资源
相似解决方案