滑動滑塊輪播在頁面加載之前啓動

Question

修改我的問題並確定希望有人可以提供幫助。我設置了滑動滑塊。我也使用Foundation Zurb的「標籤」功能，因此打開一個頁面，頂部有用於導航的標籤。由於整個頁面加載，即使人們沒有看到該標籤，並且在圖像本身加載完畢之前，由初始頁面加載（例如滑塊）觸發的任何內容都會開始運行。我需要的是滑塊通過幻燈片集開始自動旋轉，並在完成一個循環後停在第一張幻燈片上。滑塊本身正在工作 - 這是我不知道該怎麼做的初始啓動功能。我希望有一些方法可以在實際滑塊的函數調用中做到這一點，但我只是不知道要使用什麼JavaScript函數。

現在我的函數調用滑塊如下。但是當用戶點擊標籤頁時，它從幻燈片1開始，但幻燈片從不顯示，因爲在某人移動到該頁面後，它仍然嘗試加載圖像。然後打開第2張幻燈片，並通過瀏覽剩餘的幻燈片並返回到第2張幻燈片並停止正確完成。

<script type="text/javascript"> 
var item_length = $('.slide > div').length - 1; 
var slider = $('.slide').slick({ 
autoplay: true, 
autoplaySpeed: 5000, 
dots: true, 
infinite: false, 
speed: 2000, 
fade: true, 
slide: 'div', 
onAfterChange: function(){ 
//check the length of total items in .slide container 
//if that number is the same with the number of the last slider 
//Then pause the slider 
if(item_length == slider.slickCurrentSlide()){ 
//this should do the same thing -> slider.slickPause(); 
slider.slickSetOption("autoplay",false,false) 
}; 
} 
}); 
</script> 

Answer 1

嘗試在load函數中添加你的腳本jQuery的函數。此回調函數僅在DOM準備就緒並且所有資源已加載後才執行。

<script type = "text/javascript"> 
$(window).load(function() { 
    var item_length = $('.slide > div').length - 1; 
    var slider = $('.slide').slick({ 
     autoplay: true, 
     autoplaySpeed: 5000, 
     dots: true, 
     infinite: false, 
     speed: 2000, 
     fade: true, 
     slide: 'div', 
     onAfterChange: function() { 
      //check the length of total items in .slide container 
      //if that number is the same with the number of the last slider 
      //Then pause the slider 
      if (item_length == slider.slickCurrentSlide()) { 
       //this should do the same thing -> slider.slickPause(); 
       slider.slickSetOption("autoplay", false, false) 
      }; 
     } 
    }); 
}); 
</script>