将图像动态添加到 Swiper JS 中不起作用

Question

我有一个页面需要在滑块中显示图像。

// Initializing the Swiper
var swiper = new Swiper(".mySwiper", {
    loop: true,
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    autoplay: {
        delay: 1000,
        disableOnInteraction: false,
    },
    watchSlidesProgress: true,

});

var swiper2 = new Swiper(".mySwiper2", {
    loop: true,
    spaceBetween: 10,
    autoplay: {
        delay: 1000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    thumbs: {
        swiper: swiper,
    },
});

$("body").keydown(function (e) {
    if (e.keyCode == 37) { // top
        swiper.slidePrev();
    }
    else if (e.keyCode == 39) { // bottom
        swiper.slideNext();
    }
});


let image_list = ["https://swiperjs.com/demos/images/nature-1.jpg", "https://swiperjs.com/demos/images/nature-2.jpg", "https://swiperjs.com/demos/images/nature-3.jpg", "https://swiperjs.com/demos/images/nature-4.jpg", "https://swiperjs.com/demos/images/nature-5.jpg", "https://swiperjs.com/demos/images/nature-6.jpg", "https://swiperjs.com/demos/images/nature-7.jpg",
"https://swiperjs.com/demos/images/nature-8.jpg",
"https://swiperjs.com/demos/images/nature-9.jpg",
"https://swiperjs.com/demos/images/nature-10.jpg"]
// Adding Images
for (i = 0; i < image_list.length; i++) {
    let div = '<div class="swiper-slide"><img src="' + image_list[i] + '" alt=""/></div>';
    $("#large-img").append(div);
    $("#small-img").append(div);
}

/* SWIPER JS */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 10rem;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 27rem;
    width: 100%;
}

.mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />


<div class="container-fluid" style="padding: 0;">
    <div class="row g-0 justify-content-center mt-5">
        <div class="col-md-12">
            <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                <div class="swiper-wrapper" id="large-img">
                    <!-- Images coming from the backend through javascript -->
                </div>

                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>

            </div>

            <div thumbsSlider="" class="swiper mySwiper">
                <div class="swiper-wrapper" id="small-img">
                    <!-- Images coming from the backend through javascript -->
                </div>
            </div>

        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

当我通过 javascript 将图像动态添加到 HTML 模板时，SWIPER 不起作用。我实际上是在 img.src 属性中传递图像的 media url，因为我使用 Django 作为后端。无论你从哪里传递图像 url，它都不起作用。

**UPDATE** ：在运行这段代码中，它适用于全屏模式（只有自动播放和下一个和上一个按钮。单击缩略图不起作用）和小 window 按下 Run Snippet 时打开，Swiper.js 不起作用。小 window 中的问题与我在我的网站上看到的类似。

Answer 1

你应该在加载图片后加载Swiper，这样它可以在初始化时使用图片。也许查看 Swipper 文档是个好方法，我看到它有一些延迟加载参数，可能有助于以不同的方式解决这个问题。

文档：
https://swiperjs.com/swiper-api#lazy-loading

将图像动态添加到 Swiper JS 中不起作用

Adding Images Dynamically into Swiper JS not working

javascript

html

swiper

swiper.js