swiper.update() slider wrong amount of pagination dots

Question

I have a swiper slider that I activate ONLY on mobile in a click event. I take an invisible div, and append children inside the container and run swiper.update().

The code looks like this:

// 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();
        }
    });

The output of all of this is:

My swiper wrapper:

But my pagination is only 4...

I do my swiper.update() under everything...I tried swiper.updateSlides() but that made all slides appear?

I'm lost here - howcome the dots don't update?

Answer 1

For anyone who's struggling with this, it looks like swiper has a bad time with dynamic slides with looping. Setting loop: false seems to work

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