slick slider is not appending <div class="slick-slide slick-cloned" and dynamic class not appending in each loop of ajax

Question

//$.each(coff, function(index, el) in this loop all the data is append but slick slider is not applying on AJAX each loop

function slickCarousel1() {
    $('#regular2').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
}

the below code is applicable on the button and show the records fetched from the database

$('.step1Circle').on('click',function() {
    $('#step1_img').remove();
    $('.sliderclas').empty();
    var coffee_slug = $(this).attr("coffee_name");
    $("#loader").show();

    $('#coffType').val(coffee_slug);
    $('#slider-thumbs').empty();
    $('#slider-thumbs').append('<section class="regular sliderclas" id="regular2"></section>');

    $.ajax({
        url: '../../../testAjax',
        method: 'get',
        data: {coffee_slug:coffee_slug },
        success: function(response) {
            $('#regular1').slick('unslick');              
            slickCarousel1();

            $('#loader').fadeOut(1000);
            $('#shakeid').append(' <img src="'+response.coffee_img+'">');

            var coff = response.coffee_data;
            var i = 0;
            $.each(coff, function(index, el) { // we are not getting any error in console

                $('.slick-track').append('<div><center><i onclick="AjaxStepTwo(event)" style="font-size:150px; color:'+el.color+' !important"  class="fa fa-circle step2Circle" coffee_nam="'+el.slug+'"  aria-hidden="true"></i><br><b style="color:black;">'+el.title+'</b></center></div>');

            });
        }
    });
});

function slickCarousel1() {
    $('#regular2').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
}

Answer 1

You cannot add slides looping elements. Slick needs to know that you added slides. Most probably you would want to add the slides using

$('#your-element').slick('slickAdd',"<div>..</div>");

refer: Slick Demos, Add & Remove demo

Or maybe, if it works you can check by adding and then again running slickCarousel1 function basically reinitialising the slick slider

Or maybe, you can use $('#your-element').slick('refresh') and check if the slides are getting refreshed or not. (this is not that documented, refer: this github issue )