Dmitry  Igumenov Dmitry Igumenov - 1 month ago 21
jQuery Question

Display slider correctly in bs modal window

I use bootstrap modal + slick slider for show slider in bs modal window, but have some problem with display this.
Slider not open before autoplay does
not work

But i need this right away modal be loaded

Here js code

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

});


Thanks!

Answer

Call $.slick() from shown.bs.modal event

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

});