Question

如何根据条件显示/隐藏幻灯片示例：滑块外部的按钮，用于显示/隐藏（toogles）第二张幻灯片。

我找到了添加＆amp;删除文档（http://kenwheeler.github.io/slick/）中的功能，但这会删除完整的幻灯片，我无法再获取它了。

有简单的解决方案吗？

Answer 1

我也检查了这个。但是，上面的示例对滑块的点导航没有任何影响。

您真正需要的是过滤方法。

slickFilter

如果你在这个链接上查看slickFilter，你会找到一个例子和文档。

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

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

干杯

Answer 2

事实证明，show / hidding幻灯片已经可以很好地使用光滑的滑块了。以下示例适用于我:)

＆＃13;

    $(function () {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });

      $('[data-js-show-hide-slide-btn]').click(function () {
        $('[data-js-hidesample]').toggle('slow');
      });
    });

＆＃13;

    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;
    }

＆＃13;

<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>

＆＃13;

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

Slick-Slider：显示隐藏幻灯片

2 个答案: