油滑滑块：显示隐藏幻灯片

问题描述：

如何可以显示基于条件实施例/隐藏幻灯片：滑块外的按钮，其示出/隐藏（toogles）所述第二幻灯片。油滑滑块：显示隐藏幻灯片

我发现添加&删除的机制的文档（http://kenwheeler.github.io/slick/）功能，但是这消除了完整的幻灯片，我无法得到它了。

有没有简单的解决方案？

答

我检查了这一点。不过，上面的例子对滑块的点导航没有任何影响。

你真正寻找的是过滤方法。

slickFilter

如果这个链接在这里仰望slickFilter你会发现一个例子和文档。

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

更新：这里是一个JS提琴https://jsfiddle.net/fonsekaean/1r77fc5c/1/

干杯

你可以打一个比方吧，然后我改变接受雁 – Stefan

@Stefan加做了JS提琴。 – nivanka

答

事实证明，这个节目/ 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/

油滑滑块：显示隐藏幻灯片

相关推荐