I need some help with Swiper slider.

Can`t set slider to initial position on resize. Method "swiper.slideTo(0)" don`t work.
Maybe anyone know how solve this problem. A very important thing, loop must be active when the slider is "active".
Or how to set loop param to breakpoints)).
I use vanilla Swiper on Vue project.

switchInitSwiper - wrapper for full reInit on resize;
checker - only enable/disable some properties

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);
}

I need some help with Swiper slider.

Can`t set slider to initial position on resize. Method "swiper.slideTo(0)" don`t work.
Maybe anyone know how solve this problem. A very important thing, loop must be active when the slider is "active".
Or how to set loop param to breakpoints)).
I use vanilla Swiper on Vue project.

switchInitSwiper - wrapper for full reInit on resize;
checker - only enable/disable some properties

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);
}

• javascript
• swiper.js

1 Answer 1

From the documentation you linked to in your question:

mySwiper.slideToLoop(index, speed, runCallbacks);

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

You're instantiating with loop: true so try this.slideToLoop(0);