Slick-Slider：スライドを非表示にする

Question

条件に基づいてスライドを表示/非表示にする方法 例：2番目のスライドを表示/非表示（トグル）するボタン。

私はがdocumention（http://kenwheeler.github.io/slick/）で機能を削除するが、これは完全なスライドを削除し、私はもうそれを得ることができない&を追加しました。

簡単な解決策はありますか？

Answer 1

私もこれを確認しました。しかし、上記の例では、スライダのドット・ナビゲーションに対して何の効果もありません。

あなたが本当に探しているのはフィルタリング方法です。

slickFilter

あなたはこのリンクをここにslickFilterまで見れば、あなたは例やドキュメントを見つけるだろう。

http://kenwheeler.github.io/slick/

アップデート：ここにJSのフィドルがhttps://jsfiddle.net/fonsekaean/1r77fc5c/1/

乾杯

Answer 2

この表示/非表示スライドは、すっきりとしたスライダーでとてもうまく機能しています。次の例では、私のために働いた:)

$(function() { 
 
     $(".regular").slick({ 
 
     dots: true, 
 
     infinite: true, 
 
     slidesToShow: 3, 
 
     slidesToScroll: 3 
 
     }); 
 

 
     $('[data-js-show-hide-slide-btn]').click(function() { 
 
     $('[data-js-hidesample]').toggle('slow'); 
 
     }); 
 
    });

html, body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    * { 
 
     box-sizing: border-box; 
 
    } 
 

 
    .slider { 
 
     width: 50%; 
 
     margin: 25px auto; 
 
    } 
 

 
    .slick-slide { 
 
     margin: 0px 20px; 
 
    } 
 

 
     .slick-slide img { 
 
     width: 100%; 
 
     } 
 

 
    .slick-prev:before, 
 
    .slick-next:before { 
 
     color: black; 
 
    } 
 

 
    .hidde-sldie img { 
 
     border: 5px solid red; 
 
    } 
 

 
    .show-hide-slide-btn { 
 
     text-align: center; 
 
     margin: 0 auto; 
 
     display: block; 
 
    }

<script src="https://code.jquery.com/jquery-git.js"></script> 
 
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script> 
 

 

 

 
    <button class="show-hide-slide-btn" data-js-show-hide-slide-btn> 
 
    Show hide Slide 2 
 
    </button> 
 

 
    <section class="regular slider"> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=1"> 
 
    </div> 
 
    <div class="hidde-sldie" data-js-hidesample style="display: none;"> 
 
     <img src="http://placehold.it/350x300?text=2"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=3"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=4"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=5"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=6"> 
 
    </div> 
 
    </section>

JSFiddle：https://jsfiddle.net/m2pyygx6/