循环 2-帮助在轮播寻呼机上实现 alt 标题选项

Question

是否有人知道如何实现循环 2“alt-caption”选项，参见此处：http://jquery.malsup.com/cycle2/demo/caption.php，到此处看到的轮播寻呼机；例如http://jquery.malsup.com/cycle2/demo/caro-pager.php

我得到的只是 alt-caption div 中的“alt”一词，而不是 alt 标签中的标题。

<div id="galleryWrapper">
<div id="slideshow-1">

    <div id="cycle-1" class="cycle-slideshow"
    data-cycle-slides="> div"
    data-cycle-timeout="0"
    data-cycle-prev="#slideshow-1 .cycle-prev"
    data-cycle-next="#slideshow-1 .cycle-next"
    data-cycle-fx="fade"
    data-cycle-pager="#no-template-pager" 
    data-cycle-pager-template=""

    data-cycle-caption="#slideshow-1 #alt-caption"
    data-cycle-caption-template="{{alt}}"
    >
        <div><img src="http://malsup.github.io/images/beach1.jpg" alt="Spring" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach2.jpg" alt="yadda" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach3.jpg" alt="so what" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach4.jpg" alt="another" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach5.jpg" alt="crash" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach6.jpg" alt="landing" width=500 height=500></div>

    <div class="captionNavWrap">
        <div class="arrowLeft"> <a href="#" class="cycle-prev fa fa-chevron-left"></a> </div>
        <div class="arrowRight"> <a href="#" class="cycle-next fa fa-chevron-right"></a> </div>
        <div class="CaptionCenter">
            <div id="alt-caption" class="center"> </div>
        </div>
    </div>
    </div><!-- i added-->
    <div id="slideshow-2">
        <div id="cycle-2" class="cycle-slideshow"
    data-cycle-slides="> div"
    data-cycle-timeout="0"
    data-cycle-fx="carousel"
    data-cycle-carousel-visible="5"
    data-cycle-carousel-fluid=true
    data-allow-wrap="false"

    >
            <div><img src="http://malsup.github.io/images/beach1.jpg"  alt="Spring" width=100 height=100></div>
            <div><img src="http://malsup.github.io/images/beach2.jpg" width=100 height=100></div>
            <div><img src="http://malsup.github.io/images/beach3.jpg" width=100 height=100></div>
            <div><img src="http://malsup.github.io/images/beach4.jpg" width=100 height=100></div>
            <div><img src="http://malsup.github.io/images/beach5.jpg" width=100 height=100></div>
            <div><img src="http://malsup.github.io/images/beach6.jpg" width=100 height=100></div>

        </div>
    </div>

这是我设置的小提琴：http://jsfiddle.net/crashlanding/6s2hg8ps/5/

Answer 1

您就快到了，只要您将图像嵌套在 div 标签中，只需做一点小改动。

data-cycle-slides="> div"

到

data-cycle-slides="> div >img"