bsモーダルウィンドウで正しくスライダを表示

Question

bsモーダルウィンドウでは、表示スライダにブートストラップモーダル+スリックスライダを使用しますが、これを表示するには問題があります。 スライダー開いていない自動再生がすぐにモーダルが

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

}); 

感謝をロードすることが not work

しかしi need thisを行う前に！

Answer 1

可能なソリューションへ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(""); 
    }); 

});