Добавление изображений в пятно из jquery

Question

Я пытаюсь добавить изображения к своему скользкому слайдеру из jQuery.Структура по умолчанию должна выглядеть так, как показано на рисунке.

<div class="your-class">
  <div><img src=""> </></div>
  <div><img src=""> </></div>
  <div><img src=""> </></div>
</div>

Проблема в том, что мне нужно установить свои изображения из jQuery, но когда я это делаю, изображения не структурируются по пятам и просто остаются внутри «вашего класса» div,

Вот как я пытаюсь сделать это прямо сейчас.Проблема в том, что slick должен создавать дочерние элементы, добавлять этот контент и структурировать его.

let image = ['<div><img class="selectedImage" src="',
             e.target.result,
             '" title="',
             escape(theFile.name), '"/></div>'].join('');

$(".your-class").append(image);

Это результат этого:

<div class="your-class slick-initialized slick-slider">
  <div class="slick-list draggable"></div>
  <div><img src="link_to_image"> </></div
</div>

Это требуемый результат:

<div class="your-class slick-initialized slick-slider">
  <div class="slick-list draggable">
    <div class="slick-track">
      <div class="slick-slide">
        <div>
          <div><img src="link_to_image"> </></div
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

let image = ['<div><img class="selectedImage" src="', e.target.result,
  '" title="', escape(theFile.name), '"/></div>'
].join('');


$(".your-class").append(image);

$('.your-class').slick('unslick')

//initialize again here .your-class