初始化后如何在slick-slider中添加另一个图像元素

Question

我正在使用光滑的滑块来滑动我的图像。因此，我正在我的数据库中搜索图像并将其附加到 div 和 ajax。完成后，我将在“确定”按钮上对其进行初始化。此外，我已经提供了编辑和添加更多图像的选项，但问题是，在第一次初始化后，slick 对其结构进行了更改，无法将新图像作为其中的一部分。有什么方法可以在 slick 初始化后添加这些图像。

这是代码..

这是我的div。

<div class="feturing_images" id="event_feturing"></div>

假设我得到了图像名称的自动完成，并且在选择时我正在编写这段代码。我在名为 lastToken:

的数组中获取了图像信息

function drawArtist(lastToken){
var tokens_data = '';
    tokens_data = '<div class="ugc-media">'+
              '<img src="'+lastToken.image+'" alt="'+lastToken.name+'" class="image" />'+
              '<div class="put_overlay">'+
                  '<div class="event-caption">'+
                      '<h3>'+lastToken.name+'</h3>'+
                  '</div>'+
              '</div>'+
          '</div>';
$("#event_feturing").append(tokens_data); //here I am appending the html of images.

}

现在，点击确定按钮，我写了这个：

$(document).on('click','.OK',function(){
    $('.feturing_images').slick({
            infinite: true,
            slidesToShow: 2,
            slidesToScroll: 1
        });
 });

这是我追加后得到的结构

<div id="event_feturing" class="feturing_images">
<div class="ugc-media">
    <img class="image" alt="Lady Hayes" src="http://c435242.r42.cf2.rackcdn.com/503_c-6.jpg">
    <div class="put_overlay">
        <div class="event-caption"><h3>Lady Hayes</h3></div>
    </div>
</div>
<div class="ugc-media">
    <img class="image" alt="Lady Bee" src="http://c435242.r42.cf2.rackcdn.com/700_c-19.jpg">
    <div class="put_overlay">
        <div class="event-caption"><h3>Lady Bee</h3></div>
    </div>
</div>
<div class="ugc-media">
    <img class="image" alt="Lady Sullen" src="http://c435242.r42.cf2.rackcdn.com/700_c-7.jpg">
    <div class="put_overlay">
        <div class="event-caption"><h3>Lady Sullen</h3></div>
    </div>
</div>

初始化后，slick 添加了很多类，如果我添加另一个图像，它会像上面一样简单地附加，而 slick 不接受。

Answer 1

兄弟..不用写这么多了。您可以取消 div，它将 return 所有类和库，您可以添加下一个图像，然后重新初始化。一切都会在适当的地方。

点击编辑后，执行以下操作：

$(document).on('click','.edit',function(){
      $('.feturing_images').slick('unslick');
});

初始化后如何在slick-slider中添加另一个图像元素

How to add another image element in slick-slider after initialization

html

javascript

jquery

slick.js