Eulenkarussell - Wie zeigt man alle Bilder unter dem Hauptkarussell?

Question

Ich möchte die Liste aller verfügbaren Bilder unter dem Karussell zeigen, so dass, wenn jemand auf eines der Bilder klickt, es das Hauptfoto im Karussell wird ... Nicht ganz sicher, wie das geht. habe versucht hineinzuschauen aber kann nichts finden.

Answer 1

Dafür gibt es eine gute Open-Source-Unterstützung. Sie können versuchen, diese: https://github.com/gijsroge/OwlCarousel2-Thumbs

es mit der Plugin Standard-Eule Karussell hinzufügen und aus dem Code aktivieren:

$(document).ready(function(){ 
    $('.owl-carousel').owlCarousel({ 
    thumbs: true, 
    thumbsPrerendered: true 
    }); 
}); 

hinzufügen Thumbnails (Link Slider und Thumbnails mit Daten-Slider-id-Attribute)

<div class="owl-carousel" data-slider-id="1"> 
    <div>Your Content</div> 
    <div>Your Content</div> 
    <div>Your Content</div> 
    <div>Your Content</div> 
</div> 
<div class="owl-thumbs" data-slider-id="1"> 
    <button class="owl-thumb-item">slide 1</button> 
    <button class="owl-thumb-item">slide 2</button> 
    <button class="owl-thumb-item">slide 3</button> 
    <button class="owl-thumb-item">slide 4</button> 
</div>