cycle2を制御する方法は？

Question

友人私はサイクル2のスライドショープラグインで1週間したいことがありますが、毎回失敗しました。何をしたいのですか？私は分類されたスライドショーをやろうとしています。私のサイクル2カルーセル私は3つのカテゴリー（または3つ以上）

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

を持っており、私の各Liは私のイメージは、データ - 持っていると同時に、ID

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

を持って

）の例で表示されますid属性

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

この時点では私がしたいことはできません。私はデータのみ-ID以外のli＃スポーツをクリックした場合、私はデータのみ-ID =「動物」IMGよりのli＃動物をクリックした場合

=「スポーツ」IMGサムネイル

かでスライドショーに表示されなければなりませんでなければなりません私はjQueryを使ってみてください

サムネイルをスライドショーに表示されますが、何も起こっていない

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>

あなたはスライダーを初期化するとき、彼らはすべての適格のスライドであるため、プラグインはまだ display: blockにそれらを設定している（ .hide()を使用して）あなたは隠されたい要素に display: noneを設定しているにもかかわらず3210

Answer 1

。

動的にスライドを動的に削除/追加する方法は非常に簡単ではないようです。

私が取り組んだアプローチは、非表示にしたいスライドにdata-hidden="true"を設定してから、スライドとしてimg[data-hidden="false"]に一致する画像のみを使用するようにスライダを再初期化していました。

隠しスライドがスライドショーの下に表示されないように、以下のコードをCSSに追加しました。

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

私はまた、サイクルのdiv内の他のすべてのdata-の属性を取って、私は$('.mySlideShow').cycle({...})メソッドを使用して、必要なときに私はサイクルをレンダリングすることができmySlideShowにそのクラスの名前を変更しました。ここで

は、実施例のようになります。http://codepen.io/anon/pen/dvoLeE