Slick.js間違った矢印の動作、どのように解決するには？

Question

slick.jsを使用して私のサイトにカルーセルを作成しています。最後の要素は、ここで滑らかなカルーセル矢印iがスクロールすることはできませんことを示すために灰色になるまで

$(document).ready(function(){ 

    $('.caroselloslick').slick({ 
     lazyLoad: 'ondemand', 
     infinite: false, 
     slidesToShow: 4, 
     slidesToScroll: 1 
    }); 

}); 

THREカルーセル作品：それは私が使用してjsのは、「ノー無限」のスクロールで4要素を含まなければなりませんもうとにかく、私は灰色の矢印をクリックすると、例えば3倍の数がプラグインによって何らかの形で登録されています...もし反対の矢印でスクロールしたいなら、スクロールが始まる前に3回クリックする必要があります...私はこの動作をブロックすることができますか？

Answer 1

一見無効な状態にもかかわらず、滑らかなイベントが発生しているようです。あなたが明示的に矢印ボタンをdisabled属性を設定した場合、このイベントは、このように滑らかなカウンターことを保証し、クリックで起動しません

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) { 
    console.log('fired'); 
}); 

：あなたはこのafterChangeイベントで診断メッセージを印刷するconsole.logを使用して照会することができますは、滑らかなコンテンツの実際の状態に反して、更新されていません。上記の情報を使用して

、あなたがaria-disabledの値に依存矢印ボタンのdisabled属性を設定するヘルパーメソッドを導入することができますafterChangeイベントで

function checkArrowState($arrow) { 
    if ($arrow.attr('aria-disabled') == 'true') { 
    $arrow.attr('disabled', 'disabled'); 
    } else { 
    $arrow.removeAttr('disabled'); 
    } 
} 

を、あなたのような上記のメソッドを呼び出すことができますso：

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) { 
    checkArrowState($('.slick-arrow:eq(0)')); //Previous arrow 
    checkArrowState($('.slick-arrow:eq(1)')); //Next arrow 
}); 

上記の変更は、どの矢印ボタンが変更を開始したかを確認することでさらに改善することができます。

作業例については、以下のデモをご覧ください。

Fiddle Demo