Как подключить slick slider если блок с img я вставляю в html через js?

233

12 февраля 2018, 02:55

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

var out = '';
for (var key in data) {
       out += '<div class="single-goods">';
       out += `<img class="single_goods_img" src="${data[key].image}">`;
       out += `<img class="single_goods_img" src="${data[key].image2}">`;
       out += `<img class="single_goods_img" src="${data[key].image3}">`;
       out += '</div>';

и все выводится и отображается.

<div class="single-goods">
 <img class="single_goods_img" src="images/jewelry/1.jpg">
 <img class="single_goods_img" src="images/jewelry/2.jpg">
 <img class="single_goods_img" src="images/jewelry/3.jpg">
</div>

slick slider подключаю корректно, но если подключить к классу single-goods, то ничего не происходит, и консоль тоже пустая. $('.single-goods').slick();

если создать этот же блок .single-goods с img в HTML то все работает как часы.!!!

подскажите, кто сталкивался с такой проблемой и как быть в таком случае??

Answer 1

И так работает.

$("button").click(function(){ 
	$("body").append('<div class="single-item">\ 
		<div><img src="https://static.fotopoisk.com.ua/media/uploads/bengalskij-kot-30-2.jpg"></div>\ 
		<div><img src="https://from-ua.com/upload/articles/2016/08/08/images/%D0%BA%D0%BE%D1%823.jpg"></div>\ 
		<div><img src="http://murkote.com/wp-content/uploads/2015/09/15-siberian-cat.jpg.pagespeed.ce.pYzQdgZqrR.jpg"></div>\ 
		<div><img src="http://mykoshka.ru/wp-content/uploads/2017/03/Mein-kyn.jpg"></div></div>'); 
 
	$('.single-item').slick({ 
		infinite: true, 
		slidesToShow: 3, 
		slidesToScroll: 3 
	}); 
});

img{ 
  max-width:100%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>  
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/> 
 
<button>Добавить HTML</button>