ajax調用成功后重新初始化Slick js

Question

我正在使用 Slick 實現輪播，當頁面加載時一切正常。我想要實現的是，當我調用 Ajax 來檢索新數據時，我仍然想要 slick 輪播實現，但現在我失去了它。

我已將 slick 的電話撥入 function

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

然后我在成功回調中調用 function

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

但是沒有調用 function。 我怎樣才能重新初始化這個js？

Answer 1

你應該使用unslick方法：

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

Answer 2

這應該工作。

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

Answer 3

最好的方法是在重新初始化之后銷毀光滑的滑塊。

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

Answer 4

注意：我不確定這是否正確，但您可以嘗試一下，看看是否有效。

有一個unslick方法可以取消初始化輪播，因此您可以在重新初始化之前嘗試使用它。

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

希望這可以幫助。

Answer 5

在ajax調用開始之前我不得不取消旋轉木馬，但是在你已經有一個光滑的旋轉木馬之前你不能這樣做。 因此，我將變量設置為0，並且僅在更改后運行unslick

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

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

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

        }

Answer 6

最好的方法是使用unslick設置或功能（取決於你的版本的光滑），如其他答案中所述，但這對我不起作用。 我從浮油中得到一些似乎與此有關的錯誤。

但是，現在工作的是在重新初始化光滑之前從容器中刪除slick-initialized和slick-slider類，如下所示：

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

刪除類似乎不會啟動destroy事件（未經測試但有意義），但確實導致后來的slick()調用正常運行，因此只要你沒有任何觸發器就可以銷毀，你應該是好的。

Answer 7

我遇到了一個問題，Slick旋轉木馬在新數據上並沒有令人耳目一新，它正在向以前的幻燈片添加新的幻燈片，我找到了一個解決了我的問題的答案，這很簡單。

嘗試取消單擊，然后分配正在光滑輪播中呈現的新數據，然后再次初始化光滑。 這些是我的步驟：

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

注意：請查看光滑的網站以獲取語法以防萬一。 這也意味着你在光滑甚至初始化之前都沒有使用unslick，這意味着只需初始化（比如這個jquery('.my-class').slick({options} ）;第一個ajax調用，一旦初始化然后按照上面的步驟，你可能想要使用if else

Answer 8

伙計們，我們走吧！ 它幫助了我

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

Answer 9

調用請求后，設置超時以初始化滑塊滑塊。

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

不要在開始時初始化光滑滑塊。 只需在AJAX超時后初始化。 這對你有用。

Answer 10

$('#slick-slider').slick('refresh'); //Working for slick 1.8.1

Answer 11

試試這個代碼，它對我幫助！

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

Answer 12

光滑版本：1.8.0

 function getSliderSettings() {
                return {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    loop: true,
                    arrows: true,
                    dots: false,
                }
            }
    
    
    $.ajax({
            type: 'get',
            url: '/public/index',
            dataType: 'html',
            data: some_data,
            success: function(response) {
                    $('[data-role="slick-slider"]').slick('unslick');
                    $('[data-role="slick-slider"]').html($(response).html());
                    $('[data-role="slick-slider"]').slick(getSliderSettings());
              }
        });