How to control cycle2?

friends there is something that I want to do for a week with cycle 2 slideshow plugin but I failed every time let me tell you What I want to do I'm trying to do categorized slideshow.I have filters on my cycle2 carousel (you will see on example)

I have 3 categories (or more than 3)

  <ul class="filter">
    <li id="sports">Sports</li>
    <li id="naturel">Naturel</li>
    <li id="animals">Animals</li>
  </ul>

and my each li has an id

id#sports,id#naturel,id#animals,id#blabla..

at the same time my image has data-id attribute

data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."

and at this point I can not do what I want to do.

if I click li#sports than only data-id="sports" img must be appear on slideshow with thumbnail

or if I click li#animals than only data-id="animals" img must be appear on slideshow with thumbnail

I try with jquery but nothing happend

and please click to see my little project on codepen

$(document).ready(function() {

  $(".filter li").on("click", function() {
    var activeId = $(this).attr("id");

    $("img[data-id]").hide();
    $("img[data-id = '" + activeId + "']").show();
  });
});

.single-gallery{
  width:800px;
  overflow:hidden;
  position:relative;
}
.cycle-slideshow img {
  width:100%;
  height:234px;
  max-width:100%;
}

#single-pager a img {
  width: 49.3px !important;
  height:49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

.filter {
  position: absolute;
  z-index: 1000;
  right: 0;
  top:0;
  padding: 0;
  color: #FFF;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 30px;
}

.filter li {
  list-style-type:none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
  <div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="<a href='#'><img src='{{src}}' width=48 height=48></a>" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" />
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" />
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" />
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" />
  <div id="single-pager" class="center external"></div>
    
  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

  <ul class="filter">
    <li id="sports">Sports</li>
    <li id="naturel">Naturel</li>
    <li id="animals">Animals</li>
  </ul>
</div>

Solution

Even though you are setting display: none on the elements you want hidden (using .hide()) the plugin is still setting them to display: block because when you initialize the slider they are all eligible slides.

There doesn't seem to be a very easy way of dynamically removing/adding slides on the fly.

The approach I took was setting data-hidden="true" on the slides you want hidden, then re-initializing the slider to only use images that match img[data-hidden="false"] as slides.

I added the code below to your css so that the hidden slides don't show up below the slideshow.

img[data-hidden="true"]{
  display: none;
}

I also took all the other data- attributes in the cycle div, and renamed its class to mySlideShow so I could render the cycle when I needed using the $('.mySlideShow').cycle({...}) method.

Here should be a working example: http://codepen.io/anon/pen/dvoLeE