Question

我正在使用光滑的滑块来滑动我的图像。所以，我在我的数据库中搜索图像，并用ajax将其附加到div。完成后，我在OK按钮上初始化它。此外，我已经给出了编辑和添加更多图像的选项，但问题是，在首次初始化之后，它的结构中的光滑变化并且无法将新图像作为其一部分。有什么方法可以在光滑初始化后添加这些图像。

这是代码..

这是我的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>

在初始化之后，光滑添加了很多类，如果我添加另一个图像，所以它如上所述添加简单并且光滑并不接受它。

Answer 1

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

在您的编辑点击上，执行以下操作：

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

如何在初始化后在光滑滑块中添加另一个图像元素

1 个答案: