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

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.


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

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.