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

我们已经将动态类添加到id1 div动态但它不起作用？如何在加载动态创建的div1，div 2etc ??

后添加光滑类

Answer 1

添加动态元素

时，需要再次初始化该函数

建议你这样做

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

在此处调用此函数以获取默认的函数加载，并调用与添加动态元素的函数sliderInit()相同的函数。

注意：请记住在添加元素后编写此函数。

Answer 2

这种方法有一种方法。正如documentation所述：

slickAdd html或DOM对象，索引，addBefore 添加幻灯片。如果提供了索引，则将在该索引处添加，或者在设置addBefore之前添加。如果未提供索引，则在设置addBefore时添加到结尾或开头。接受HTML字符串||对象

我会这样做：

$('#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

我也有同样的问题，

以下是我如何解决它。

你首先需要.slick（“unslick”）

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

希望有所帮助。

光滑的插件不适用于动态创建的内容，但适用于静态内容

3 个答案: