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"

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

1 个答案: