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

Question

我正在使用光滑的 slider 来滑动图像。因此，我正在数据库中搜索图像并使用 ajax 将其附加到 div 中。完成后，我将按“确定”按钮对其进行初始化。另外，我提供了编辑和添加更多图像的选项，但问题是，在第一次初始化后，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 的平滑，它将返回所有类和库，您可以添加下一个图像，然后重新初始化。一切都会在适当的地方。

在您的编辑点击中，执行以下操作:

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