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