Slickのナビゲーション矢印が表示されているかどうかに応じてコンテンツを隠す/表示する

Question

私は2つのSlickカルーセルがページにあり、1つは親スライダーを制御するサムが1つあります。スライダには多くのアイテムが含まれている場合があります。リンクをクリックすることでカルーセルを拡張し、左右の矢印を使用して前後に移動する代わりにすべてのサムが表示されるようにしたい場合があります。リンクをもう一度クリックすると、親指をカルーセルに戻します。

これはすべて問題なく動作しています。私がしたいのは、矢印が表示されている場合は、展開する/折りたたむリンクのみを表示することです。何かを拡大するのに十分な親指がないことがあるためです。

私はeventsとmethodsを通して見てきたが、私のようなものを行うために使用することができます何も表示されません。

if(slickArrowsAreVisible) { 
    do stuff 
} 

誰もが、私はこれを実現する方法を任意のアイデアを持っているの？

Answer 1

私はあなたがslickカルーセル内のボタン要素を見つける必要があると思います。このコードに続いて、

//arrow doesn't exist 
if (slick_instance.find('button.slick-arrow').length == 0) { 
    //do stuff 
    alert('No arrow'); 
} 
//arrow exists 
else { 
    //do stuff 
    alert('arrow'); 
} 

上記のコードは、ボタン要素がdomready状態のときにのみ機能します。ボタン要素が動的に作成または破棄される場合は、MutationObserverまたはDOMNodeInsertedを使用できます。あなたはこれがうまく機能DOMNodeInserted

$('.slick').bind('DOMNodeInserted', function(e) { 
    //do stuff 
}); 
$('.slick').bind('DOMNodeRemoved', function(e) { 
    //do stuff 
}); 

またはMutationObserver

function mutation(mutations) { 
    mutations.forEach(function(mutation) { 
    if (mutation.type === "childList") { 
     if (mutation.addedNodes.length) { 
     //do stuff 
     } 
     else if (mutation.removedNodes.length) { 
     //do stuff 
     } 
    } 
    }); 
} 

var observer = new MutationObserver(mutation); 
observer.observe(elem, { 
    attributes: true, 
    childList: true, 
    characterData: true 
}); 

Answer 2

スライド数をかなり簡単に取得できるinitイベントがあります。私はあなたが探していると思うことをするために、これをフィドルで使いました。

「矢印が表示されている場合」は使用していません。スライドの数とスライドの数を使用して設定しています（意味がある場合）。 （また、ここに矢印はありませんが、上の矢印をドラッグしてスライドすることができます）。

はフィドルを確認してください：https://jsfiddle.net/2kb8vmyv/

そして、私が使用しているinitイベントコード：

$el.on('init', function(event, slick, direction) { 
     var slideCount = slick.$slides.length; 
     if (slideCount <= show) { 
      $('.expand[data-for="' + selector + '"]').hide(); 
     } 
    });