Slick slider not working after displaying slides using JS with json data loading (append)?

Question

JavaScript

In a static template it works correctly:

<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>

But it’s worth making the output through JS, and the slides just stand one under the other:

<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);
            });
        });
});

Here are the js files:

<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>

I tried to put them in the header, put the index.js file in front, nothing helps.
I suspect that the point is that the elements do not have time to be processed, as in a static template.
How to be, what to do, where to run?

Answer 1

Instead try like this
$('.slider_here').slick('slickAdd', div);

Answer 2

Try to initiate the slider in then after inserting a new slide