jquery - 滑动滑块按钮在到达最后一张幻灯片之前被禁用

Question

基本上我想要做的是有多个滑动滑块，当点击一个幻灯片时，整个滑块切换到全屏模式。我找到了一个可以做到这一点的codepen：https ://codepen.io/smcgrath/pen/aydBNx

只要每页只使用一个滑块，一切都会很好。我尝试调整代码以适用于多个实例，这样我就不必复制 id 和类，因为一个页面上最多有 8 个实例。

它有点工作，只剩下一个问题我不知道如何解决。在全屏模式下，当使用箭头导航时，它们会在到达滑块末尾之前随机禁用。例如，当有 10 张幻灯片时，似乎 swiper 认为只有 5 张幻灯片。

任何指针将不胜感激。

这是我当前的代码：

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

标签： jqueryswiper