Кнопки ползунка Swiper отключаются до перехода к последнему слайду - PullRequest
Новая
       97

Кнопки ползунка Swiper отключаются до перехода к последнему слайду

0 голосов
/ 20 июня 2020

В основном то, что я пытаюсь сделать, - это иметь несколько ползунков swiper, где при нажатии на слайд весь ползунок переключается в полноэкранный режим. Я нашел код, который делает именно это: https://codepen.io/smcgrath/pen/aydBNx

Все отлично работает, пока на каждой странице используется только один слайдер. Я попытался адаптировать код для работы с несколькими экземплярами, чтобы мне не пришлось дублировать идентификаторы и классы, поскольку на странице до 8 экземпляров.

Это вроде работает, осталась только одна проблема, которая Не могу понять, как исправить. В полноэкранном режиме при использовании стрелок для навигации они случайным образом отключаются, не дойдя до конца ползунка. Похоже, Swiper считает, что слайдов всего 5, а их, например, 10.

Любые указатели были бы очень признательны.

Вот мой текущий код:

Часть 1 - несколько экземпляров Swiper 

jQuery(".hsProdSlider").each(function () {
    var currentElem = jQuery(this);
    jQuery(this)
      .find(".hsSlider .fl-module-content")
      .addClass("swiper-container");
    jQuery(this).find(".hsSlider .fl-post-feed").addClass("swiper-wrapper");
    var swiper = new Swiper(jQuery(this).find(".swiper-container"), {
      navigation: {
        nextEl: jQuery(currentElem).find(".swiperNav__next"),
        prevEl: jQuery(currentElem).find(".swiperNav__prev"),
      },
      slidesPerView: 1,
      paginationClickable: true,
      spaceBetween: 10,
      loop: false,
      breakpoints: {
        1200: {
          slidesPerView: 4,
          spaceBetween: 10,
        },
      },
    });

Часть 2 - открыть в полноэкранном режиме 

jQuery(currentElem).find(".fl-post-feed-post").each(function(){
    jQuery(this).on("click tap", function () {
        var slideId = jQuery(this).parent().find(".fl-post-feed-post").index(this);
        openFullscreenSwiper(slideId, currentElem);
    });
});

Часть 3 - полноэкранный режим 

function openFullscreenSwiper(initialSlideNumber, currentElem) {
        currentElem = jQuery(currentElem)[0];
        var mainSwiperMarkup = jQuery(currentElem).find(".swiper-container").html();

        var fullscreenswiperElem = jQuery(currentElem).find(".fullscreen-swiper");
        var fullscreenswiperElemsa = jQuery(currentElem).find(".fullscreen-swiper")[0];
        fullscreenswiperElem.append(
            mainSwiperMarkup + "<div id='fullscreen-swiper-close' class='fullscreen-swiper-close'>X</div>"
        ).fadeIn();

        var fullscreenSwiper = new Swiper(jQuery(fullscreenswiperElem), {
            navigation: {
                nextEl: jQuery(currentElem).find(".swiperNav__next"),
                prevEl: jQuery(currentElem).find(".swiperNav__prev"),
            },
            slidesPerView: 1,
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 10,
            loop: false,
            initialSlide: initialSlideNumber,
        });


        jQuery(currentElem).find(".fullscreen-swiper-backdrop").fadeIn();
        jQuery("body, html").addClass("no-scroll swiperFull");


    }

    jQuery("body").on("click", ".fullscreen-swiper-close", function () {
        var closeelem = jQuery(this).parent().parent().find(".fullscreen-swiper-backdrop");
        jQuery(this).parent().hide().empty();
        closeelem.fadeOut();
        jQuery("body, html").removeClass("no-scroll swiperFull");
    });
});
...