javascript - 在 bs 模态窗口中正确显示 slider

Question

我使用 bootstrap modal + slick slider 在 bs modal 窗口中显示 slider ，但在显示时遇到一些问题。自动播放之前 slider 未打开 not work

但是i need this立即加载模态

这里是js代码

   $(document).ready(function() {

    $(".mwrap").on("click", function() {
        var img, desc, value, elements;
        img = $("img", this).attr("src");
        desc = $("p", this).html();
        value = $("img", this).data("value");

        elements = $.map($('img[data-value="' + value + '"]'), function(img) {
            return $("<div/>", {
                html: $(img).clone()
            })
        })

        $(".wimg").attr("src", img);
        $(".wdesc").html(desc);
        $(".wslider").html(elements)
        $(".wslider").slick({
            dots: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true
        });
    });

    $("#myModal").on("hide.bs.modal", function() {
        $(".wslider").slick('destroy').html("");
    })

});

谢谢!

Answer 1

从 shown.bs.modal 事件调用 $.slick()

$(document).ready(function() {

    $(".mwrap").on("click", function() {
        var img, desc, value, elements;
        img = $("img", this).attr("src");
        desc = $("p", this).html();
        value = $("img", this).data("value");

        elements = $.map($('img[data-value="' + value + '"]'), function(img) {
            return $("<div/>", {
                html: $(img).clone()
            })
        })

        $(".wimg").attr("src", img);
        $(".wdesc").html(desc);
        $(".wslider").html(elements)

    });

    $("#myModal").on("shown.bs.modal", function() {
        $(".wslider").slick({
            dots: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true
        });
    });

    $("#myModal").on("hide.bs.modal", function() {
        $(".wslider").slick('destroy').html("");
    });

});