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

Galangal

You need to add slides dynamically by using the following function call $('.scroll-footer').slick('slickAdd',"<div></div>"); – Krueger

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.

Whorish

Im getting Uncaught TypeError: _.$slides is null while doing above approach. – Mcquillin

Answer 2

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.

Terrilyn

Thank you for mentioning unslick – Lucaslucca

Answer 3

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

Kirmess