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

admin管理员组

文章数量:1427538

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 autoplete 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=".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=".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=".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.

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 autoplete 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./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./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./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.

• javascript
• jquery
• html
• slick.js

Share Improve this question Follow asked May 25, 2016 at 9:56 user3583798user3583798

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptHow to add another image element in slickslider after initializationStack Overflow