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

Question

I am using slick slider for my images to slide. So, I am searching for images in my db and appending it to the div with ajax. once done, I am initializing it on OK button. Also, I have given the option to edit and add more images to it, but the problem is, after first initialization, slick made changes in it's structure and unable to take the new images as a part of it. Is there any way that I can add these images after slick initialize.

Here is the code..

This is my div.

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

suppose that I got autocomplete for the images name and on selection I am writing this code. I got image information in an array named 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.

}

Now, Onclick of Ok button, I wrote this:

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

This is the structure I get after append

<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>

And after initialization, slick added lot of classes and if I add another image so it append simple as above and slick doesn't accept in it.

Rahul Gupta Rahul Gupta · Accepted Answer · 2016-05-25T10:14:36

Bro.. No need to write this much. You can unslick the div and it will return all the classes and libraries and you can do add next images and then reinitialize. everything will be on proper place.

on your edit click, do this:

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

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

1 Answers