slick plugin is not working for dynamically created content but works well for static content

Question

<div id="id1" class="scroll-footer">
<dynamically created div1></div>
<dynamically created div2></div>
<dynamically created div3></div>
<dynamically created div4></div>
</div>

$(document).ready(function(){
        $('.scroll-footer').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            arrows: true
        })
    });

we have added slick class to id1 div dynamically but it doesn't work? How can I add slick class after loading the dynamically created div1, div 2etc??

Answer 1

You need the initialise the function again while adding the dynamic element

Suggest you to do this

function sliderInit(){
    $('.scroll-footer').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: true
    });
};
sliderInit();

Call the function here for default load of function and call the same function sliderInit() where you are adding dynamic element.

NOTE : Remember to write this function after adding the element.

Answer 2

There is a method for these kind of things. As documentation states:

slickAdd html or DOM object, index, addBefore Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object

I would do it like this:

$('#id1').slick(); 
$.ajax({
  url: someurl,
  data: somedata,
  success: function(content){
    var cont=$.parseHTML(content); //depending on your server result
    $(cont).find('.dynamically.created.div').each(function(){
      $('#id1').slick('slickAdd', $(this));
    })
  }
})

Answer 3

I also have the same question,

and here's how I solve it.

You need to .slick("unslick") it first

$('.portfolio-thumb-slider').slick("unslick");
$('.portfolio-item-slider').slick({
   slidesToShow: 1,
   adaptiveHeight: false,
   // put whatever you need
});

Hope that help.