如何为两张图片幻灯片而不是一张图片修改 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”）时 - 并且您处于幻灯片的原始状态，应该发生的是 image2 应该滑动到 image1 的位置，而图像 3现在在 image2.

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

按上一个，依次返回。

如何针对该功能修改此插件？

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

有什么想法吗？

Answer 1

尝试使用 jCarousel 或 jCarouselLite 来解决此问题。