28

I am using Slick for a carousel implementation and everything works fine when the pages loads.What I am trying to achieve is that when i make an Ajax call to retrieve new data I still want the slick carousel implementation, at the moment i lose it.

I have put the call for slick into a function

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

and then I call the function within my success callback

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function() {
        slickCarousel();
      }
   });

But the function isn't being called. How can I reinitialize this js?

JasonMArcher
  • 12,386
  • 20
  • 54
  • 51
Richlewis
  • 13,978
  • 32
  • 103
  • 238

11 Answers11

23

You should use the unslick method:

function getSliderSettings(){
  return {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  }
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    $('.skills_section').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
    $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $('.skills_section').slick(getSliderSettings()); /* Initialize the slick again */
  }
});
Nicholas
  • 10,490
  • 19
  • 67
  • 85
Minoru
  • 231
  • 2
  • 3
  • 4
    for me I had to use `$('.slick-media').slick('unslick').slick('reinit');` – Joseph Marikle Jan 22 '16 at 18:35
  • This worked for me, @JosephMarikle is there docs on this method I didn't see it listed? – Tom Bird Mar 30 '16 at 07:17
  • It saved my day. Thanks – Gaurav Oct 04 '16 at 06:35
  • In my case, I was simply resizing the window and in so doing, I transitioned from 2 slides to 1. Simply calling the .slick() function didn't work. However, I ran .slick('unslick'); then re-ran the the slick() function. Working perfectly – sea26.2 Dec 02 '17 at 20:32
17

The best way is you should destroy the slick slider after reinitializing it.

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
function destroyCarousel() {
  if ($('.skills_section').hasClass('slick-initialized')) {
    $('.skills_section').slick('destroy');
  }      
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    destroyCarousel()
    slickCarousel();
  }
});
Maximilian Ast
  • 2,954
  • 12
  • 33
  • 40
Chirag Prajapati
  • 361
  • 3
  • 8
14

This should work.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});
jdavid.net
  • 723
  • 9
  • 16
  • 1
    'reInit' is a slick event (that can be listened to to see when slick reinitializes), not a method that can be called to reinitialize the carousel. – mcrider Mar 17 '16 at 14:32
  • mcrider, are you sure it's not both? – jdavid.net Mar 17 '16 at 23:46
  • 4
    According to their docs, it is only an event. But I did just try this method on one of my carousels and it did indeed seem to work. – mcrider Mar 30 '16 at 14:19
  • I tried it and it crashed my page, I found that destroying it and reinitialising it was a more successful way. Maybe there have been some updates to the script since 2016? – dearsina Aug 17 '18 at 18:52
  • @mcrider The plugin has a [prototype function](https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1925) `reinit` which is called because `.slick('reinit')` simply executes the function with name of the passed string. Since the plugin's docs don't mention this I wouldn't use it though, because there might be unwanted side effects (as experienced with crashing the browser). Using `.slick('unslick')` and then `.slick(config)` is probably more reliant. – Simon Dec 13 '18 at 10:17
11
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1
Mihir Bhatt
  • 2,469
  • 2
  • 32
  • 38
3

Note: I am not sure if this is correct but you can give it a try and see if this works.

There is a unslick method which de-initializes the carousel, so you might try using that before re-initializing it.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').unslick();  // destroy the previous instance
        slickCarousel();
      }
});

Hope this helps.

Community
  • 1
  • 1
web-nomad
  • 5,753
  • 2
  • 30
  • 47
  • thanks, makes a lot more sense on what you where pointing out in the comments, unfortunately i get an error `TypeError: _.$slides is null if (_.$slides.parent().hasClass('slick-track')) {` so im assuming it hasn't unslicked so to speak, but ill keep looking into it, thanks again – Richlewis Jan 06 '15 at 09:49
  • Update: syntax is now: $(slider).slick('unslick'); – Ryan Weiss Jan 30 '19 at 16:18
3

I had to unslick the carousel before the ajax call starts, but you can't do that until there is already a slick carousel. So, I set a variable to 0 and only run unslick after it changed

var slide = 0
if(slide>0)      
$('#ui-id-1').slick('unslick');

        $.ajax({
            //do stuff, here
        },
        success: function( data ) {

            $('#ui-id-1').slick();
            slide++;

        }
A.Clifford
  • 76
  • 1
  • 4
3

The best way would be to use the unslick setting or function(depending on your version of slick) as stated in the other answers but that did not work for me. I'm getting some errors from slick that seem to be related to this.

What did work for now, however, is removing the slick-initialized and slick-slider classes from the container before reinitializing slick, like so:

function slickCarousel() {
    $('.skills_section').removeClass("slick-initialized slick-slider");
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

Removing the classes doesn't seem to initiate the destroy event(not tested but makes sense) but does cause the later slick() call to behave properly so as long as you don't have any triggers on destroy, you should be good.

Tejas Kemkar
  • 55
  • 2
  • 7
3

Try this code, it helped me!

$('.slider-selector').not('.slick-initialized').slick({
  dots: true,
  arrows: false,
  setPosition: true
});
Lahiru Dilshan
  • 31
  • 1
1

I was facing an issue where Slick carousel wasn't refreshing on new data, it was appending new slides to previous ones, I found an answer which solved my problem, it's very simple.

try unslick, then assign your new data which is being rendered inside slick carousel, and then initialize slick again. these were the steps for me:

jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick options});

Note: check slick website for syntax just in case. also make sure you are not using unslick before slick is even initialized, what that means is simply initialize (like this jquery('.my-class').slick({options}); the first ajax call and once it is initialized then follow above steps, you may wanna use if else

Junaid
  • 3,203
  • 1
  • 23
  • 31
1

Here we go, guys! It helped me

$('.slick-slider').not('.slick-initialized').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});
Dmitry Shulga
  • 478
  • 1
  • 4
  • 15
-1

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

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

Tijan Manandhar
  • 182
  • 2
  • 17