I am trying to work out why the unslick method isn't working when I am calling it after a successful ajax call. I have read this post and am looking for the slick-initialized
class, but I am still getting the error
TypeError: .$slides is null if (.$slides.parent().hasClass('slick-track'))
HTML
<div id="skills" class="skills_section">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
When I initialize slick on page load the markup will look like this:
<div id="skills" class="skills_section slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track">
<div class="slick-slide slick-cloned">Slide 1</div>
<div class="slick-slide slick-cloned">Slide 2</div>
<div class="slick-slide slick-cloned">Slide 3</div>
</div>
</div>
</div>
I have an ajax call that will just replace the data in each slick-slide
$.ajax({
type: 'get',
url: '/public/index',
dataType: 'script',
data: data_send,
success: function(data) {
unSlickCarousel();
slickCarousel();
}
});
Functions
function slickCarousel() {
$('.skills_section').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
}
function unSlickCarousel() {
if($('#skills').hasClass('slick-initialized')){
$('.skills_section').unslick();
}
}
But as I have mentioned I get the error and the HTML markup looks like this
<div id="skills" class="skills_section slick-initialized slick-slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
I believe the way you call slick methods has changed.
Instead of $('.skills_section').unslick();
try $('.skills_section').slick("unslick");
You call also call this directly inside the responsive option in the slick options
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With