在Swiper中使用双向控制报错的一个小错误处理

445 阅读1分钟

遇到要使用两个swiper且双向控制的开发需求,
<div class="swiper-text"></div>
<div class="swiper"></div>

    var swiper = new Swiper('.swiper', {
        // autoplay: true,
        loop: true,
        speed: 1000,
        spaceBetween: 0,
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        on: {
            slideChange: function () {
                swiperText.slideToLoop(this.realIndex)
            }
        }
    });

    var swiperText = new Swiper('.swiper-text', {
        // autoplay: true,
        loop: true,
        speed: 1000,
        spaceBetween: 0,
        on: {
            slideChange: function () {
                swiper.slideToLoop(this.realIndex)
            }
        }
    });
    

在使用以上方法尝试双向控制时发现报错: "Cannot read properties of undefined (reading 'slideToLoop')" 后尝试将第一个swiper下的loop注释掉,随即解决问题。

        var swiper = new Swiper('.swiper', {
            //autoplay: true,
            //loop: true,    注释掉这行代码
            .......
        });

原因

有清楚的大佬可以说下