如何修改两个图像幻灯片而不是一个幻灯片的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;
}

所以想象一下，当你按下'next'（或者在这种情况下为'＃right-arrow'） - 并且你处于幻灯片放映的原始状态时，应该发生的是image2应该滑动到image1的位置，而图像3现在变得可见image2。

再次按下，它会继续旋转，现在不再显示images1＆amp; 2。

按上一步，然后按顺序返回。

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

我尝试了很多不同的东西，包括让每张图片放在不同的幻灯片上 - 但我的实现从未实现过。

有什么想法吗？

Answer 1

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