swiper.update() 滑块分页点数错误

Question

我有一个滑动滑块，我只在移动设备上通过点击事件激活它。我拿了一个不可见的 div，并在容器内附加子项和运行 swiper.update().

代码如下所示：

// Mobile image carousel
    if($(window).width() < 800 && ($(".product-image-thumbs .product-image-thumbnail").length > 1 || $(".product-video-mobile").length)) {
        var swiper = new Swiper('.swiper-container', {
            autoplay:false,
            direction: "horizontal",
            loop:true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                bulletActiveClass: 'active'
            }
        });
    }
    // variant selections
    var swatchClickCount = 0;
    $(".swatch-variant").click(function(e) {
        e.preventDefault();
        swatchClickCount ++;
        var activeColor = $(this).data('variant-image-color');
        var colorForText = $(this).data('variant-color');
        // remove images to append the new ones
        $(".product-image-thumbs .swiper-wrapper").children("img.product-image-thumbnail.swiper-slide").remove()
        // iterate over each div
        $("#product-image-srcs div").each(function() {
            var activeImage = $(this).attr("data-pdp-thumb-src").toUpperCase().includes(activeColor);
            if (activeImage) {
                if ($(window).width() < 800) {
                    $(".vid-thumb").remove();
                    $(".product-image-thumbs .swiper-wrapper").append(
                        '<img class="product-image-thumbnail swiper-slide' + 
                        '" src=' + $(this).attr("data-pdp-main-src") +
                        '" data-standard-size-src=' + $(this).attr("data-pdp-main-src") +
                        '" data-zoom-src=' + $(this).attr("data-pdp-zoom-src") + '>'
                    )
                    let mobileVidSlide = document.querySelector(".product-video--mobile");
                    if (mobileVidSlide) {
                        mobileVidSlide.parentNode.appendChild(mobileVidSlide);
                    }
                    $(".swiper-slide-duplicate").remove();
                } else {
                    $(".product-image-thumbs .swiper-wrapper").prepend(
                        '<img class="product-image-thumbnail swiper-slide' + 
                        '" src=' + $(this).attr("data-pdp-main-src") +
                        '" data-standard-size-src=' + $(this).attr("data-pdp-main-src") +
                        '" data-zoom-src=' + $(this).attr("data-pdp-zoom-src") + '>'
                    )
                }
            }
            var selectedImage = $(".product-image-thumbnail").last().attr("data-standard-size-src");
            var selectedZoomImage = $(".product-image-thumbnail").last().attr("data-zoom-src");
            $(".product-image-thumb").attr('src', selectedImage);
            $(".product-image-thumb").attr('data-zoom-src', selectedZoomImage);
        });
        $(".swatch-variant").removeClass("selected-color")
        $(this).addClass("selected-color")
        if ($(window).width() < 800) {
            // console.log("MOBILE ACTIONS")
            $("#variant-videos").remove()
            $("#variant-videos-mobile div").each(function() {
                var activeVariant = $(".selected-color").data("variant-color")
                var selectedVideoVariant = $(this).data("selected-video-color").includes(activeVariant);
                if (!selectedVideoVariant) {
                    $(this).hide();
                    $(this).removeClass("active-video")
                } else {
                    $(this).show();
                    $(this).addClass("active-video")
                }
            });
            $(".product-video--mobile .product-video").attr("src", $(".active-video").data("mobile-video-variant"));
            $(".product-video--mobile .product-video")[0].play();
        } else {
            $("#variant-videos div").each(function() {
                var activeVariant = $(".selected-color").data("variant-color")
                var selectedVideoVariant = $(this).data("selected-video-color").includes(activeVariant);
                if (!selectedVideoVariant) {
                    $(this).hide();
                    $(this).removeClass("active-video")
                } else {
                    $(this).show();
                    $(this).addClass("active-video")
                }
            });
        }
        variantStockAdjust()
        getProductVariantIdForCart();
        if(!$(".selected-size").hasClass("sold-out")) {
            $("#product-add-to-cart").text("ADD TO CART");
        } else {
            $("#product-add-to-cart").text("NOTIFY ME");
        }
        // Mobile image carousel
        if($(window).width() < 800 && ($(".product-image-thumbs .product-image-thumbnail").length > 1 || $(".product-video-mobile").length)) {
            console.log($(".swiper-slide").length);
            swiper.update();
        }
    });

所有这一切的输出是：

我的刷卡包装器：

但是我的分页只有4...

我 swiper.update() 在所有内容下都做了...我试过了 swiper.updateSlides() 但这让所有幻灯片都出现了吗？

我迷路了 - 为什么点不更新？

Answer 1

对于任何正在为此苦苦挣扎的人来说，swiper 似乎在循环动态幻灯片方面表现不佳。设置 loop: false 似乎有效

var swiper = new Swiper('.swiper-container', {
            autoplay: false,
            cache: false,
            direction: "horizontal",
            loop: false,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                bulletActiveClass: 'active'
            }
        });

swiper.update() 滑块分页点数错误

swiper.update() slider wrong amount of pagination dots

javascript

jquery

swiper