油滑滑塊：顯示隱藏幻燈片

Question

如何可以顯示基於條件 實施例/隱藏幻燈片：滑塊外的按鈕，其示出/隱藏（toogles）所述第二幻燈片。

我發現添加&刪除的機制的文檔（http://kenwheeler.github.io/slick/）功能，但是這消除了完整的幻燈片，我無法得到它了。

有沒有簡單的解決方案？

Answer 1

我檢查了這一點。不過，上面的例子對滑塊的點導航沒有任何影響。

你真正尋找的是過濾方法。

slickFilter

如果這個鏈接在這裏仰望slickFilter你會發現一個例子和文檔。

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

更新：這裏是一個JS提琴https://jsfiddle.net/fonsekaean/1r77fc5c/1/

乾杯

Answer 2

事實證明，這個節目/ hidding幻燈片已經工作得很好用油滑滑塊。下面的例子爲我工作:)

$(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/