jquery - 我如何修改 jQuery 循环插件以用于两个图像幻灯片而不是一个？

Question

假设幻灯片看起来类似于:http://malsup.com/jquery/cycle/div.html除了它只有两张图片而不是三张。

同样假设它有两个触发器，就像本页中间的演示:http://jquery.malsup.com/cycle/lite/

这就是我想要构建的。

但是，当您按“下一个”和“上一个”时，我希望每个图像都移动到另一个图像，反之亦然。所以代码看起来像这样:

<div id="slideshow" width="100%">
        <div class="slide">
            <img src="image1.jpg" width="43%">
            <img src="image2.jpg" width="43%">
        </div>
        <div class="slide">
            <img src="image3.jpg" width="43%">
            <img src="image4.jpg" width="43%">
        </div>      
    </div>

jQuery 看起来像这样:

$('#slideshow').cycle({
        fx: 'wipe',
        timeout: 0,
        prev: '#left-arrow',
        next: '#right-arrow',       
    });

样式表:

#slideshow {
    overflow: hidden;
}

想象一下，当您按“下一步”(在本例中为“#right-arrow”)时 - 并且您处于幻灯片放映的原始状态，应该发生的是图像 2 应该滑动到图像 1 的位置，而图像 3现在在 image2.

再按一次，它继续旋转，现在图像 1 和 2 不再可见。

按上一个，它按顺序返回。

如何修改此插件以获得该功能？

我尝试了很多不同的方法，包括将每张图片放在不同的幻灯片上 - 但我的实现从未奏效。

有什么想法吗？

Answer 1

为此行为尝试 jCarousel 或 jCarouselLite。