Question

我在bs模态窗口中使用bootstrap modal + slick滑块显示滑块，但显示此问题有一些问题。在自动播放之前滑块未打开 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

从$.slick()活动

致电shown.bs.modal

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

});

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

1 个答案: