油滑滑塊 -

我使用slick.js供電的滑塊從不同的幻燈片視圖中除去箭頭。我想在第一張幻燈片處於活動狀態時移除「上一個」箭頭，在上一張幻燈片處於活動狀態時移除「下一個」箭頭。當最後一張幻燈片處於活動狀態時，我可能需要刪除兩個箭頭。是否有一個可以做到這一點的流暢的事件函數或jquery函數？油滑滑塊 -

來源

2016-02-12 heytricia

爲什麼喲你想刪除最後幻燈片上的箭頭？你還提到你想刪除最後一張幻燈片上的下一個箭頭。上一張和最後一張幻燈片是什麼意思？他們是同一個權利？ – pratikpawar

是的，它們是一樣的。所以如果我在最後一張幻燈片上，我不希望下一個箭頭出現 - 因爲沒有下一張幻燈片，我不想重新開始。 – heytricia

要禁用之前的箭頭，第一張幻燈片和下一個箭頭在最後一張幻燈片，你可以在光滑的初始化定義infinite : false,像下面。

$("#slider").slick({ 
     infinite : false 
    });

如果您有其他設置，只需在初始化中加入。 slider是容器的ID。

這是爲了在滑塊禁用箭頭。要刪除箭頭，您可以在第一張/最後一張幻燈片處於活動狀態時隱藏它。瀏覽文檔，瞭解如何獲得滑塊上的活動幻燈片，並使用jquery隱藏您可以按箭頭按鈕的類名稱隱藏箭頭。您可以通過檢查元素來獲取箭頭按鈕的類/標識。右鍵點擊箭頭並檢查它。

要獲取當前幻燈片：$('#slider').slick('slickCurrentSlide');

隱藏或顯示一個箭頭：$('.slick-next').show();或$('.slick-next').hide();

同樣，對於上一個箭頭：$('.slick-prev').show();或$('.slick-prev').hide();

繼承人小提琴：https://jsfiddle.net/pjfw1wqz/

來源

2016-02-14 00:10:54 pratikpawar

謝謝！我添加了「無限：假」的設置，但箭頭仍然可見，我以爲我誤解了這個設置。這是星期五和非常漫長的一週結束 - 我腦子死了！現在我更仔細地看它，即使該按鈕設置爲顯示，它也會被禁用。我可以定位殘疾人班來隱藏按鈕。用戶仍然可以訪問導航點，並可以根據需要重新開始。也謝謝你幫助我理解如何使用afterChange。這是我認爲我需要的，如果有必要，我可以做更多。 – heytricia

 // slick init 
     startSlick(); 
     var tickerDiv = $("#animatedHeading"); 
     function startSlick(slick) { 
      tickerDiv.slick({ 
       arrows: true, 
       infinite: false, 
       adaptiveHeight: true 
       }); 
       var current_article = tickerDiv.slick('slickCurrentSlide'); 
       var total_articles = tickerDiv.slideCount; 
       tickerDiv.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){ 
        current_article = tickerDiv.slick('slickCurrentSlide'); 
        total_articles = slick.slideCount; 
        slickArrow(); 
       }); 
       slickArrow(); 
       function slickArrow() { 
        if(current_article==0){ 
         $('.slick-prev').hide(); 
        }else{ 
         $('.slick-prev').show(); 
        } 
        if (current_article==total_articles-3){ 
         $('.slick-next').hide(); 
        }else{ 
         $('.slick-next').show(); 
        } 
       } 
     };

來源

2016-11-28 18:51:21 Omar

油滑滑塊 -

回答

相關問題