I've done an ajax call to retrieve data and I want to put the images in a Slick carousel.

The problem is - I've read - Slick only see static data, so I've to turn-off turn-on Slick once images are in html.

It should be coded as here below.

$('.slick-media').slick('unslick').slick('reinit');

But I get that error:

TypeError Cannot read property 'unslick' of undefined

In my code I have 2 Slick carousels. One is static, the second one is construced via jQuery when data is received by ajax call.

If I try to unslick the static carousel, then it works. But I'm not able to unslick the second carousel, which is dynamically built (I get the error).

Do you have any idea?

This is how I declare my 2 carousels.

$(document).ready(function(){
      $('.carousel').slick({
        //properties
      });

      $('.product_carousel').slick({  
        //properties
      });
    });

I've done an ajax call to retrieve data and I want to put the images in a Slick carousel.

The problem is - I've read - Slick only see static data, so I've to turn-off turn-on Slick once images are in html.

It should be coded as here below.

$('.slick-media').slick('unslick').slick('reinit');

But I get that error:

TypeError Cannot read property 'unslick' of undefined

In my code I have 2 Slick carousels. One is static, the second one is construced via jQuery when data is received by ajax call.

If I try to unslick the static carousel, then it works. But I'm not able to unslick the second carousel, which is dynamically built (I get the error).

Do you have any idea?

This is how I declare my 2 carousels.

$(document).ready(function(){
      $('.carousel').slick({
        //properties
      });

      $('.product_carousel').slick({  
        //properties
      });
    });

• javascript
• jquery
• slick.js

1 Answer 1

Ok, here is the solution! (yay)

Slick var or something similar was 'undefined' for that carousel.

So we bind it to the Slick var with our settings:

function getSliderSettings() {
      return {
        dots: true,
        arrows: false,
        slidesToShow: 1,
        cssEase: 'ease',
        variableWidth: false,
        speed: 800,
        fade: true,
        cssEase: 'linear'
      }
}

$('.product_carousel').slick(getSliderSettings());

Apparently there's no need to do $('your_carousel_class').slick('unslick').slick();