在 bs 模态窗口中正确显示滑块答案

【问题标题】：Display slider correctly in bs modal window在 bs 模态窗口中正确显示滑块
【发布时间】：2017-03-07 11:06:32
【问题描述】：

我在 bs 模态窗口中使用 bootstrap modal + slick 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("");
    })

});

谢谢！

【问题讨论】：

Link 到可能的解决方案。使用模态显示事件。

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案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("");
    });

});

【讨论】：