Slick plugin does not work for dynamically generated 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 added the slick class to id1 div dynamically, but it doesn’t work? How to add slick class after loading dynamically created div1, div 2etc ??

Answer 1

You need to initialize the function again when adding a dynamic element

Suggest you do it

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

Call the function here to load the default function and call the same function sliderInit()where you add the dynamic element.

NOTE . Remember to write this function after adding an item.

Answer 2

,

.

.slick( "unclick" )

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

, .

Answer 3

There is a method for this kind of thing. As the documentation states:

slickAdd html or DOM object, index, addBefore Add a slide. If a pointer is provided, it will be added to this index or earlier if the addBefore parameter is set. If no index is specified, add it to the end or to the beginning if addBefore is set. Accepts an HTML string || An 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));
    })
  }
})