Не работает slick слайдер после того, как отображаю слайды с помощью JS с подгрузкой json данных (append)?

Question

[Yura_Mart]

В статичном шаблоне работает корректно:

<div class="featured-slider animated fadeInRight">
			<div class="featured-item"><!-- 1. Featured Slider Item -->
				<div class="thumb">
					<img src="images/image.jpg" alt="">
				</div>
				<div class="overlay"></div>
				<div class="caption">
					<h2>Доставка ежедневно</h2>
					<p>В любую точку Москвы. От 3 часов с момента заказа</p>
					<a class="featured-btn blue" href="#">Узнать больше <i class="fa fa-angle-double-right"></i></a>
				</div>
			</div><!-- 1. End Featured Slider Item -->

			<div class="featured-item"><!-- 2. Featured Slider Item -->
				<div class="thumb">
					<img src="images/banner.jpg" alt="">
				</div>
				<div class="overlay"></div>
				<div class="caption">
					<h2>100% гарантия качества, обмена и возврата</h2>
					<p>Акции!Акции!Акции!Акции!Акции!</p>
					<a class="featured-btn blue" href="#">Узнать больше<i class="fa fa-angle-double-right"></i></a>
				</div>
			</div><!-- 2. End Featured Slider Item -->
		</div>

Но стоит сделать вывод через JS, и слайды просто встают друг под другом:

<div class="featured-slider animated fadeInRight slider_here">	
</div>

$(document).ready(function () {
    $.ajax({
        type: "POST",
        dataType: 'JSON',
        url: "http://sait/index.php",
        data: "get_slider=yes",
    })
        .then(sales => {
            console.dir(sales);
            sales.forEach(sale => {

                const div = $('<div class="featured-item">' +
                             '<div class="thumb">' +
                             '<img src="http://sait/'+ sale.sale_image +'" alt="">' +
                             '</div>' +
                             '<div class="overlay"></div>' +
                             '<div class="caption">' +
                             '<h2>'+ sale.sale_title +'</h2>' +
                             '<p>'+ sale.sale_text +'</p>' +
                             '<a class="featured-btn blue" href="#">Узнать больше <i class="fa fa-angle-double-right"></i></a>' +
                             '</div>' +
                             '</div>');

                $(".slider_here").append(div);
            });
        });
});

Вот как лежат js файлы:

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/jquery.slicknav.js"></script>
<script type="text/javascript" src="js/jquery.swipebox.js"></script>
<script type="text/javascript" src="js/index.js"></script>

Пробовал ставить их в header, файл index.js ставить вперёд, ничего не помогает.
Я так подозреваю что дело в том, что элементы не успевают обрабатываться, как в статичном шаблоне.
Как быть, что делать, куда бежать?

Comments

[Сергей delphinpro]

Как быть, что делать, куда бежать?

Известно куда — бежать читать документацию https://github.com/kenwheeler/slick/#methods

Answer 1

[Марат Гарифуллин]

Вместо
$(".slider_here").append(div);

попробуйте так
$('.slider_here').slick('slickAdd', div);

Comments

[Yura_Mart]

Спасибо вам, делов то, всё работает!
Не устаёте помогать мне)

[Марат Гарифуллин]

MadPirozhok, Пожалуйста)

Answer 2

[nvdfxx]

Попробуйте слайдер инициировать в then после вставки нового слайда