一页上有多个 jQuery Cycle 幻灯片，每个都有图像计数器

Question

我正在尝试制作一个包含多个 jQuery Cycle Slideshow 实例的页面，每个实例都有一个图像计数器，显示哪个是当前图像索引，例如图片 5 of 7

我遇到了为每个幻灯片制作图像索引计数器显示的问题，以及单击图像会推进所有幻灯片，而不是单个幻灯片。

每个图像幻灯片都将在 Wordpress 循环中，因此我认为不可能为每个幻灯片设置一个唯一的 ID，以指定单击哪个幻灯片时应该前进的一种方式。

下面是我的幻灯片代码...

<div class="slideshow">
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
</div>
<div id="caption"></div>


<div class="slideshow">
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
</div>
<div id="caption"></div>

还有 js/jquery...

$(function() {
    $('.slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        next: '.slideshow',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

这是我制作的小提琴的链接，可以说明问题。

http://jsfiddle.net/JUST_ROB/VhcgL/55/

认为应该有一个非常简单的解决方案，但需要一些帮助。谢谢！

Answer 1

你有 2 个问题。

1. 您正在使用 id 两次。 (The id global attribute defines a unique identifier (ID) which must be unique in the whole document)
2. 您没有根据滑块添加标题。

caption 必须使用类而不是 id，并且需要根据给定的滑块添加迭代器。使用 jQuery-cycle，您可以通过使用（基于您的参数名称）opts.$cont，然后使用 caption 类获取下一个元素来实现此目的

---

解决方案是以下代码：

$(function() {
    $('.slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        next: '.slideshow',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount; 
    
    opts.$cont.next('.caption').html(caption);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<div class="slideshow">
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
</div>
<div class="caption"></div>


<div class="slideshow">
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
</div>
<div class="caption"></div>

Here as JSfiddle