Добрый день. Использую bootstrap modal + slick slider, сейчас контент в модальном окне формируется динамически, одно модальное окно для всех элементов на странице. Контент состоит из изображения, описания и слайдера с похожими изображениями который формируется по data-value. Проблема в том, как обновить данные в модальном окне при клике на изображение в слайдере? Как к этому изображению подвязать контент?
JS код который сейчас используется
$(".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
});
$('html').removeClass('.hide-slider');
});
$("#myModal").on("hide.bs.modal", function() {
$(".wslider").slick('destroy').html("");
})
Пример работы скрипта
http://bogdan.tw1.ru/works
Большое спасибо гуру js