周期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标签中的title。

<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"