Wie steuert man cycle2?

Question

Freunde dort ist etwas, was ich für eine Woche mit Zyklus 2 Diashow-Plugin tun möchte, aber ich versagte jedes Mal, lassen Sie mich Ihnen sagen, was ich tun möchte Ich versuche, kategorisierte Diashow zu tun.Ich habe Filter auf meinem cycle2 Karussell (Sie werden

ich habe 3 Kategorien (oder mehr als 3) am Beispiel)

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

und meine jeder li hat eine ID

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

zugleich Daten- mein Bild hat ID-Attribut

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

und an diesem Punkt kann ich nicht tun, was ich tun möchte.

wenn ich li # Sport klicken als nur Daten-id = „Sport“ img auf Diashow mit Miniatur

erscheinen muss oder ob ich li # Tiere klicken als nur Daten-id = „Tiere“ img sein müssen erscheinen auf Diashow mit Miniatur

ich mit jquery versuchen, aber nichts passiert

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

Auch wenn Sie display: none auf die Elemente setzen Sie (mit .hide()) versteckt wollen das Plugin noch sie zu display: block Einstellung, weil, wenn Sie den Schieberegler initialisieren sie alle in Frage kommenden Folien sind.

Es scheint keine sehr einfache Möglichkeit zu sein, Slides im laufenden Betrieb dynamisch zu entfernen/hinzuzufügen.

Der Ansatz, den ich nahm, war data-hidden="true" auf den Folien, die Sie ausblenden möchten, dann den Schieberegler neu initialisieren, um nur Bilder zu verwenden, die img[data-hidden="false"] als Folien entsprechen.

Ich habe den Code unten zu Ihrem CSS hinzugefügt, so dass die versteckten Folien nicht unter der Diashow angezeigt werden.

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

Ich habe auch alle anderen data- Attribute im Zyklus div und umbenannt seiner Klasse mySlideShow so konnte ich den Zyklus machen, wenn ich mit der $('.mySlideShow').cycle({...}) Methode benötigt.

sollte hier ein funktionierendes Beispiel sein: http://codepen.io/anon/pen/dvoLeE