jQuery Cycle 2 Carousel 使用分页器和下一个/上一个链接答案

【问题标题】：jQuery Cycle 2 Carousel using pager and next / prev linksjQuery Cycle 2 Carousel 使用分页器和下一个/上一个链接
【发布时间】：2013-10-23 03:07:40
【问题描述】：

我一直在玩 Cycle 2 插件，尤其是这个例子：http://jquery.malsup.com/cycle2/demo/caro-pager.php

我在本地有这个，我想更改它，以便在需要时可以选择拥有数字寻呼机，这样我就可以同时拥有下一个/上一个和寻呼机，或者只是隐藏一个并使用其他。

问题是，如果您查看我设置的示例； http://jsfiddle.net/ZYEbT/ - 由于轮播上的data-allow-wrap="false" 属性，您将能够看到寻呼机无法正确显示，但删除它会破坏可点击的轮播图像，但会显示所有寻呼机链接。

是否可以同时让 next 和 prev 与寻呼机一起工作？

我的 HTML：

<div id="slideshow-1">
    <div id="cycle-1" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-caption="#slideshow-1 .custom-caption"
        data-cycle-fx="fade"
        >
        <div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div>
    </div>
</div>

<div id="carousel">
    <div id="cycle-2" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#carousel .cycle-prev"
        data-cycle-next="#carousel .cycle-next"
        data-cycle-fx="carousel"
        data-allow-wrap="false"
        data-cycle-pager="#custom-pager"
        data-cycle-pager-template="<span><a href=#> {{slideNum}} </a></span>"
        >
        <div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div>
    </div>


    <a href="#" class="cycle-prev">&laquo; prev</a>
    <a href="#" class="cycle-next">next &raquo;</a>

</div>

<div id="custom-pager" class="center"></div>

jQuery:

jQuery(document).ready(function($){
        var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
            // advance the other slideshow
            slideshows.not(this).cycle('goto', opts.currSlide);
        });

        $('#cycle-2 .cycle-slide').click(function(){
            var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
            slideshows.cycle('goto', index);
        });
    });

如果我遗漏了什么，请告诉我您需要查看的内容。

【问题讨论】：

标签： jquery jquery-cycle jquery-cycle2

【解决方案1】：

我想我已经弄清楚了，如果我遗漏了什么，请告诉我。

首先，您应该将寻呼机放在主幻灯片中。然后除了使用cycle-next cycle-prev 事件之外，添加这个。它会在寻呼机被激活时运行，并将两个幻灯片移动到正确的幻灯片上。

var slideshows2 = $('.cycle-slideshow').on('cycle-pager-activated', function(e, opts) {
    // advance the other slideshow
    slideshows2.not(this).cycle('goto', opts.currSlide);
});

这是一个更新的小提琴，展示了它的实际效果：Fiddle

【讨论】：