Swiper слайдер. метод slideTo с циклом - PullRequest
Новая
       18

Swiper слайдер. метод slideTo с циклом

1 голос
/ 25 февраля 2020

Мне нужна помощь с Ползунок Swiper .

Невозможно установить ползунок в исходное положение при изменении размера. Метод "swiper.slideTo (0)" не работает.
Может быть, кто-нибудь знает, как решить эту проблему. Очень важная вещь: l oop должен быть активен, когда ползунок «активен».
Или как установить параметр l oop в точки останова)).
Я использую vanilla Swiper в проекте Vue.

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

1 Ответ

0 голосов
/ 25 февраля 2020

Из документации, которую вы связали с в своем вопросе:

mySwiper.slideToLoop(index, speed, runCallbacks);

То же самое, что .slideTo, но для случая, когда используется с включено l oop.

Вы создаете экземпляр с loop: true, поэтому попробуйте this.slideToLoop(0);

...