jquery-cycle2 - 有没有办法将 2 个滑块与 JQuery 周期 2 同步？

Question

是否有可能做到这一点？

http://jquery.malsup.com/cycle2/

你必须使用回调事件吗？

谢谢

Answer 1

当然，请查看演示同步幻灯片

HTML

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-reverse=true
        data-cycle-timeout=0
        data-index=1
        >
        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
    </div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollVert
        data-cycle-timeout=0
        data-index=2
        >
        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
    </div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollVert
        data-cycle-timeout=0
        data-cycle-reverse=true
        data-index=4
        >
        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
    </div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        data-index=3
        >
        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
    </div>
</div>

JS

<script>
(function() {
"use strict";

var slideshows = $('.cycle-slideshow');

// optional: sort the slideshow collection based on the value of the data-index attribute
Array.prototype.sort.call( slideshows, function(a, b) {
    a = $(a).data('index'), b = $(b).data('index');
    return a < b ? -1 : a > b ? 1 : 0;
});

// bind to cycle-after to trigger next slideshow's transition
$('#container').on('cycle-after', function(e) {
    var index = slideshows.index(e.target);
    transitionNext(index);
});

// trigger the initial transition after 1 second
setTimeout(transitionNext, 1000);

function transitionNext( index ) {
    if (index === undefined || index == slideshows.length -1 )
        index = 0;
    else
        index++;

    slideshows.eq(index).cycle('next');
}

})();
</script>

解决方案是使用：data-index=#

希望这会有所帮助，干杯！