jquery.cycle2 transition plugin mit mehreren Untertiteln - jquery, jquery-cycle

Ich versuche, das Plugin jquery.cycle2.js zu verwenden, um ein transtionales Karussell zu erstellen. http://jquery.malsup.com/cycle2/demo/carousel.php. Ich möchte, dass in diesem Karussell mehrere Bilder angezeigt werdeneinmal, wie in der Demo zu sehen ist. Ich möchte jedoch, dass jede Folie eine eigene Beschriftung hat, sodass unter jedem Bild eine Beschriftung steht. Ich konnte nur eine Beschriftung auf dem Bildschirm anzeigen, was ich nicht wollte. Hier ist mein Code:

<div class="cycle-slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-caption="#alt-caption"
data-cycle-caption-template="{{alt}}"
data-cycle-carousel-visible=3
data-cycle-carousel-fluid=true
>
<img src="/images/img1.jpg" alt="img1" />
<img src="/images/img2.jpg" alt="img2" />
<img src="/images/im3.jpg" alt="img3" />
<img src="/images/img4.jpg" alt="img4" />
</div>
<!-- empty element for caption -->
<div id="alt-caption" class="center"></div>

Antworten:

Ich habe es herausgefunden. Wir können die Datenzyklus-Beschriftung dafür nicht nutzen, sondern müssen stattdessen die Datenzyklus-Folien nutzen. Dadurch können wir ein Bild- / Text-Li-Element als Folie verwenden. Hier ist mein Code:

<ul class="cycle-slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-slides="li"
data-cycle-carousel-visible=3
data-cycle-carousel-fluid=true
>
<li><img src="/images/img1.jpg" alt="img1" /><div>Caption 1</div></li>
<li><img src="/images/img2.jpg" alt="img2" /><div>Caption 2</div></li>
<li><img src="/images/im3.jpg" alt="img3" /><div>Caption 3</div></li>
<li><img src="/images/img4.jpg" alt="img4" /><div>Caption 4</div></li>
</ul>