Метод slidePrev() у Swiper слайдера некорректно работает?

Question

[Ilya1791]

Здравствуйте!

Есть небольшой слайдер с картинками, при листании которого меняется большая картинка (меняется атрибут src).
Src подставляется в зависимости от параметра swiper.activeIndex, штатный метод swiper. Обнаружилось вот что: когда нажимаешь на стрелку вперёд, срабатывает метод swiper.slideNext(), и всё корректно отрабатывается. swiper.activeIndex корректно переключается, слайдер зациклен.

В обратную сторону так не работает. При клике на кнопку назад срабатывает метод swiper.slidePrev(), и он возвращает некорректные лданные. Метод swiper.activeIndex всё время возвращает 2 слайд, в независимости от того, сколько раз кликнуть.


С чем может быть связан такой баг?

Настройки слайдера:

var swiper = new Swiper(".mySwiper3", {
        slidesPerView: "auto",
        spaceBetween: 16,
        initialSlide: 2,
        centeredSlides: true,
        loop: true,
        breakpoints: {
            320: {
                centeredSlides: true,
            }
        }
    });

Comments

[Danny Arty]

А полный скрипт покажете?

[Ilya1791]

Danny Arty,

var slider = document.querySelector(".mySwiper3");
    var btnPrev = document.querySelector(".shop-item-cover .prev-slide");
    var btnNext = document.querySelector(".shop-item-cover .next-slide");
    var imageMinArr = document.querySelectorAll(".swiper-slide");
    var imageMax = document.querySelector(".shop-item-cover .slider-img-max");
    var fancyImgMax =  document.querySelector(".shop-item-cover .fancy-img-max")
    function updateImageMax() {
        var activeSlideIndex = swiper.activeIndex;
        var selectSrc = imageMinArr[activeSlideIndex].querySelector("img").src;
        imageMax.src = selectSrc;
        fancyImgMax.href = selectSrc;
    }
    updateImageMax();
    for (var i = 0; i < imageMinArr.length; i++) {
        imageMinArr[i].addEventListener("click", () => {
            swiper.slideTo(i);
            updateImageMax();
        });
    }

    btnNext.addEventListener("click", () => {
        if (swiper.isEnd) {
            swiper.slideTo(0);
        } else {
            swiper.slideNext();
        }

        updateImageMax();
    });
    btnPrev.addEventListener("click", () => {
        if (swiper.isBeginning) {
            swiper.slideTo($('.swiper-slide').length());
        } else {
            swiper.slidePrev();
        }

        updateImageMax();
    });

[Danny Arty]

Ilya1791, правильно ли я понимаю, что вы хотите вставлять активную картинку в отдельный блок? Зачем этот велосипед со слушанием клика, если это нативный функционал кнопок? Вы ведь можете просто повесить свою функцию на событие смены активного слайда:

Answer 1

[psiklop]

Используй realIndex (не activeIndex)