Как добавить слайдер в модальное окно bootstrap?

Question

[dmitryIG]

Задача - создать страницу изображений из "кирпичной" кладки (использую masonry) с открытием отдельно каждого изображения в модальном окне. Для модального окна использую bootstrap и для слайдера slick slider.

Код блока с изображением

<div class="col-xs-12 col-sm-4 col-md-2 masonry nopadding">
  <div class="mwrap"  data-toggle="modal" data-target="#myModal">
    <img class="img-responsive" data-value="1" src="/img/test/1.jpg">
    <p class="wdesc-hide">Описание изображения</p>
  </div>
</div>

Код модалки(модалка одна для всех блоков)

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body row">
            	<div class="wimg-block">
                	<img class="wimg img-responsive" src="" />
                </div>
                <div class="wdesc-block ">
                	<p class="wdesc"></p>
                	<div class="wslider">
				сюда генерятся блоки с img		
			</div>
                </div>
            </div>
        </div>
    </div>
</div>

Код JS
1. Запуск masonry
2. Запуск slick слайдера
3. Запуск модалки: берем данные(изображение и текст) из блока с изображением и добавляем в модалку(для того чтобы под каждый блок с изображением не создавать отдельный html модалки)
Со слайдером немного сложнее, смысл слайдера в показе "похожих изображений" выборку похожих изображений делаю по значению data-value через .map()

(function($) {
    var $grid = $('.masonry-container').masonry({
        itemSelector: '.masonry',
        percentPosition: true,
        columnWidth: '.masonry'
    });
    $grid.imagesLoaded().progress(function() {
        $grid.masonry();
    });

    $(document).ready(function() {

        function createSlick() {
            $(".wslider").not('.slick-initialized').slick({
                dots: true,
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true
            });
        }

        $('.mwrap').on('click', function() {
            var img = $('img', this).attr('src');
            var desc = $('p', this).html();
            var value = $('img', this).attr('data-value');

            var arr = $('img[data-value="' + value + '"]').map(function() {
                return this.src;
            }).get()
            var elements = $();
            for (x = 0; x < arr.length; x++) {
                elements = elements.add('<div><img src="' + arr[x] + '"></div>');
            }

            $('#myModal').on('show.bs.modal', function() {
                $(".wimg").attr("src", img);
                $(".wdesc").html(desc);
                $('.wslider').append(elements);
                createSlick();
                $(window).on('resize', createSlick);
            });
        });

        $('#myModal').on('hidden.bs.modal', function() {
        })
    });
})(jQuery);

Слайдер работает при переходе в первое модальное окно, но если открываю последующие окна, то создаются доп массивы и все рушится. Не могу понять как правильно решить задачу и где закрался косяк. Большое спасибо за помощь.