javascript - 滑动 slider 。带循环的 SlideTo 方法

Question

我需要 Swiper slider 方面的帮助.

调整大小时无法将 slider 设置到初始位置。方法“swiper.slideTo(0)”不起作用。
也许有人知道如何解决这个问题。非常重要的一点是，当 slider “事件”时，循环必须处于事件状态。
或者如何将循环参数设置为断点))。
我在 Vue 项目上使用 vanilla Swiper。

switchInitSwiper - 调整大小时完全重新初始化的包装器；
检查器 - 仅启用/禁用某些属性

let self = this;
this.$refs.viewedSlider._SLIDES_COUNT_ = this.$refs.viewedSlider.querySelectorAll('.shop-item');
let viewed = switchInitSwiper({query: '(max-width:0px)', element: this.$refs.viewedSlider, thinArrow: true}, {
    spaceBetween: 0,
    slidesPerView: 4,
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next.viewed',
        prevEl: '.swiper-button-prev.viewed',
    },
    breakpoints,
    on
});

let on = {resize: checker, init: checker};
let breakpoints = {
    0: {slidesPerView: 1},
    600: {slidesPerView: 2},
    800: {slidesPerView: 3},
    1100: {slidesPerView: 4}
};



function checker() {
    let slider = null;
    let currentPerView = this.passedParams.breakpoints[this.currentBreakpoint].slidesPerView;

    if (this.el === self.$refs.viewedSlider) {
        slider = self.$refs.viewedSlider;
    } else if(this.el === self.$refs.similarSlider) {
        slider = self.$refs.similarSlider;
    }

    if (currentPerView >= slider._SLIDES_COUNT_.length) {
        this.el.parentElement.classList.add('disable-slider');
        this.allowTouchMove = false;
        this.allowSlideNext = false;
        this.allowSlidePrev = false;

        this.slideTo(0, 1000);// <------ this don`t work
        //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

        console.log('O+_O');
    } else {
        this.el.parentElement.classList.remove('disable-slider');
        this.allowTouchMove = true;
        this.allowSlideNext = true;
        this.allowSlidePrev = true;
    }
    console.log(this);
}

Answer 1

来自the documentation you linked to在你的问题中:

mySwiper.slideToLoop(index, speed, runCallbacks);

Does the same as .slideTo but for the case when used with enabled loop.

您正在使用 loop: true 进行实例化，因此请尝试 this.slideToLoop(0);