Question

基本上，我要尝试的是使用多个滑动滑块，单击该滑块时，整个滑块将切换到全屏模式。我找到了一个可以做到这一点的代码笔：https://codepen.io/smcgrath/pen/aydBNx

只要每页只使用一个滑块，一切都可以正常工作。我尝试将代码修改为可用于多个实例，因此不必重复id和类，因为一个页面上最多有8个实例。

这种工作方式，仅剩1个问题，我不知道该如何解决。进入全屏模式后，使用箭头导航时，它们会在到达滑块末端之前被随机禁用。 swiper似乎以为只有5张幻灯片，例如有10张幻灯片。

任何指针将不胜感激。

这是我当前的代码：

第1部分-多个刷卡实例

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

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

0 个答案: