title: How to control cycle2?
body: <p>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)</p>
  
  <p>I have 3 categories (or more than 3)</p>
  
  <pre><code>  &lt;ul class="filter"&gt;
      &lt;li id="sports"&gt;Sports&lt;/li&gt;
      &lt;li id="naturel"&gt;Naturel&lt;/li&gt;
      &lt;li id="animals"&gt;Animals&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>and my each li has an id </p>
  
  <pre><code>id#sports,id#naturel,id#animals,id#blabla..
  </code></pre>
  
  <p>at the same time my image has data-id attribute </p>
  
  <pre><code>data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."
  </code></pre>
  
  <p>and at this point I can not do what I want to do.</p>
  
  <p>if I click li#sports than only data-id="sports" img must be appear on slideshow with thumbnail</p>
  
  <p>or if I click li#animals than only data-id="animals" img must be appear on slideshow with thumbnail</p>
  
  <p>I try with jquery but nothing happend</p>
  
  <p><a href="http://codepen.io/cowardguy/pen/OpVdoQ" rel="nofollow noreferrer">and please click to see my little project on codepen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $(".filter li").on("click", function() {
      var activeId = $(this).attr("id");
  
      $("img[data-id]").hide();
      $("img[data-id = '" + activeId + "']").show();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"&gt;&lt;/script&gt;
  &lt;div class="single-gallery"&gt;
    &lt;div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="&lt;a href='#'&gt;&lt;img src='{{src}}' width=48 height=48&gt;&lt;/a&gt;" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true"&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports"&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel"&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals"&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" /&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" /&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" /&gt;
      &lt;img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" /&gt;
    &lt;div id="single-pager" class="center external"&gt;&lt;/div&gt;
      
    &lt;div id="single-next-prev"&gt;
      &lt;span id="single-left"&gt;Prev&lt;/span&gt;
      &lt;span id="single-right"&gt;Next&lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;ul class="filter"&gt;
      &lt;li id="sports"&gt;Sports&lt;/li&gt;
      &lt;li id="naturel"&gt;Naturel&lt;/li&gt;
      &lt;li id="animals"&gt;Animals&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>