javascript - Slick jQuery: TypeError Cannot read property 'unslick' of undefined - Stack Overflow

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

Share Improve this question Follow edited Jan 6, 2017 at 10:47 br3t 1,65822 gold badges2121 silver badges2828 bronze badges asked Apr 25, 2016 at 23:19 FrancescoNFrancescoN 2,1861212 gold badges3636 silver badges4848 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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();