如何控制cycle2？

Question

朋友有一些事情我想要做一個星期2週期幻燈片插件，但我每次都失敗讓我告訴你我想做什麼我試圖做分類幻燈片。我在我的cycle2旋轉木馬上有過濾器（你會看到例子）

我有3個類別（或3個以上）

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

，我的每一個裏有一個ID

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

同時我的形象有數據 - id屬性

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

在這一點上，我不能做我想做的事情。

如果我點擊不僅僅是數據-ID李＃運動=「體育」 IMG必須出現在播放幻燈片的縮略圖

，或者如果我點擊不僅僅是數據-ID李＃動物=「動物」 IMG必須出現在幻燈片縮略圖與

我嘗試用jQuery，但沒有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>

Answer 1

即使你設置你想要隱藏的（使用.hide()）插件仍然將它們設置爲display: block，因爲當你初始化滑塊他們都是合格的幻燈片元素display: none。

似乎沒有一種非常簡單的動態刪除/添加幻燈片的方法。

我採取的方法是在您要隱藏的幻燈片上設置data-hidden="true"，然後重新初始化滑塊以僅使用與img[data-hidden="false"]匹配的圖像作爲幻燈片。

我將下面的代碼添加到您的css中，以便隱藏的幻燈片不會顯示在幻燈片下方。

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

我也參加了其他所有data-屬性的週期DIV，並更名其類mySlideShow，所以我可以使循環，當我需要使用$('.mySlideShow').cycle({...})方法。

這裏應該是一個工作示例：http://codepen.io/anon/pen/dvoLeE