Slick not working after ajax call

Question

This is a similar question to the one here. I am trying to make my slick carousel work after the successful ajax call. Tried every solution there but it still does not seem to work for me.

.reviews-page-carousel slick

$('.reviews-page-carousel').slick({
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
});

ajax call

$.ajax({
    type: "GET",
    url: review_url + "?page=" + page,
    success: function(result) {
        $('.reviews-page-carousel').slick('unslick').slick('reinit');
    }
})

Tried this as well

$.ajax({
    type: "GET",
    url: review_url + "?page=" + page,
    success: function(result) {
        $('.reviews-page-carousel').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
        $('.reviews-page-carousel').slick(getSliderSettings()); /* Initialize the slick again */
    }
});

Both gives this error:

Uncaught TypeError: Cannot read property 'unslick' of undefined

Try using $('.reviews-page-carousel').unslick(); instead of $('.reviews-page-carousel').slick('unslick'); — Deepak Kumar T P, Dec 19 '17 at 05:09
@DeepakKumarTP Error: Uncaught TypeError: $(...).unslick is not a function — Jason, Dec 19 '17 at 05:12
$('.reviews-page-carousel').slick('unslick'); remove this line check https://stackoverflow.com/questions/36852761/slick-jquery-typeerror-cannot-read-property-unslick-of-undefined — Deepak Kumar T P, Dec 19 '17 at 05:18
Tried that as well and got this error: Uncaught TypeError: Cannot read property 'add' of null. Seems like it's because I'm trying to load slick twice? Do you have any idea how to fix this? — Jason, Dec 19 '17 at 05:26

Ravi Chauhan · Answer 1 · 2018-07-24T07:58:28.247

You need to destroy slick section before assign new data:

function destroyCarousel() {
    if ($('.reviews-page-carousel').hasClass('slick-initialized')) {
        $('.reviews-page-carousel').slick('unslick');
    }
}


    function applySlider() {
         $('.reviews-page-carousel').slick({
                 arrows: false,
                 slidesToShow: 1,
                  variableWidth: true,
                  centerPadding: '10px'
         });
  }

and after assign new data, call slick function again.

    $.ajax({
        type: "GET",
        url: review_url + "?page=" + page,
        success: function(result) {
            destroyCarousel(); // destroy slick slider first
             $('.reviews-page-carousel').html(''); // now make html empty          
             $('.reviews-page-carousel').html(result); // apply new data
              applySlider(); // apply slick slider again
    }
})

Please try above solution and if need any help let me know.

Thanks

It works well. I was going to change slider plugin cos of this problem. You saved my day. Destroying slick with .slick('unslick') and Applying again is the key. — Felix Htoo, Mar 15 '22 at 17:45

Tijan Manandhar · Answer 2 · 2017-12-19T05:47:55.690

0

After calling an request, set timeout to initialize slick slider.

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

$.ajax({
    type: "GET",
    url: review_url+"?page="+page,
    success: function(result){
        setTimeout(function () {
            $(".reviews-page-carousel").slick(options)
        }, 500);
    }
})

Update: Do not initialize slick slider at start. Just initialize after an ajax with timeout. That should work for you.

edited Dec 19 '17 at 05:47

answered Dec 19 '17 at 05:22

Tijan Manandhar

322
3
18

Tried this and got this error: Uncaught TypeError: Cannot read property 'add' of null – Jason Dec 19 '17 at 05:28
Look the update above and try doing that :).. And do not initialize slick at the start. Just initialize after requesting an ajax request. – Tijan Manandhar Dec 19 '17 at 05:35
Got the same error. Btw there seems to be a syntax error – Jason Dec 19 '17 at 05:46
Well, this was my solution =) try tweaking – Tijan Manandhar Dec 19 '17 at 05:48

score 0 · Answer 3 · answered Dec 19 '17 at 06:56

Solution

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

Ajax

$.ajax({
        type: "GET",
        url: review_url+"?page="+page,
        success: function(result){

            setTimeout(function () {
                $(".reviews-page-carousel").not('.slick-initialized').slick(options)
            }, 500);

score 0 · Answer 4 · answered Sep 26 '21 at 11:01

0

this one work for me

fetch('url')
.then(res=> res.json())
.then(data=> {
// result here 
$('.myslider').append('data')
// then,
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1

}

More details here

answered Sep 26 '21 at 11:01

NIKHIL CHANDRA ROY

807
11
16

Slick not working after ajax call

4 Answers4