Reinitialize Slick js after successful ajax call

Question

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

User · Answer

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

User · Answer

This should work     ajax       type   get       url    public index       dataType   script       data  data send      success  function                 skills section   slick  reinit

User · Answer

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

User · Answer

slick-slider   slick  refresh      Working for slick 1 8 1

User · Answer

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

User · Answer

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

User · Answer

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 gt 0            ui-id-1   slick  unslick               ajax                 do stuff  here                    success  function  data                      ui-id-1   slick                slide

User · Answer

Try this code  it helped me       slider-selector   not   slick-initialized   slick     dots  true    arrows  false    setPosition  true

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] Reinitialize Slick js after successful ajax call

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to slick.js