CODEWITHSUNDEEP
jqueryslick.js
Stefan
Stefan

Reputation: 14863

Slick-Slider: Show hide slides

How can you show/ hide slides based on a condition Example: A button outside the slider, which shows/hides (toogles) the second slide.

I found the Add & Remove function in the documention ( http://kenwheeler.github.io/slick/ ), but this removes the complete slide and I can't get it anymore.

Is there a simple solution?

Upvotes: 1

Views: 17106

Answers (2)

nivanka
nivanka

Reputation: 1372

I checked this too. However the above example doesnt have any effect over the slider's dot navigation.

What you are really looking for is the filtering method.

slickFilter

If you look up to slickFilter here on this link you'd find an example and the doc.

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

Update: here is a JS fiddle https://jsfiddle.net/fonsekaean/1r77fc5c/1/

Cheers

Upvotes: 7

Stefan
Stefan

Reputation: 14863

Turns out, that show/ hidding slides already works pretty nice with slick slider. The following example worked for me :) 

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

Upvotes: 0

Related Questions