滑动滑块。带循环的 SlideTo 方法

Question

我需要一些有关Swiper slider的帮助。

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

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

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

从您在问题中链接到的文档中：

mySwiper.slideToLoop(index, speed, runCallbacks);

与 .slideTo 的作用相同，但适用于与启用循环一起使用的情况。

你正在实例化loop: true所以尝试this.slideToLoop(0);