如何为两张幻灯片而不是一张幻灯片修改jQuery cycle插件? [英] How do I modify the jQuery cycle plugin for a two image slideshow instead of one?

问题描述

想象一下幻灯片显示类似于以下内容: http://malsup.com/jquery/cycle /div.html ，但只有两张图片，而不是三张.

Imagine a slideshow looks similar to this: http://malsup.com/jquery/cycle/div.html except it has only two images instead of three.

也可以想象它有两个触发器，例如本页中间的演示: http: //jquery.malsup.com/cycle/lite/

Also imagine that it has two triggers, like the demo in the middle of this page: http://jquery.malsup.com/cycle/lite/

这就是我要构建的.

但是，当您按"next"和"prev"时，我希望每个图像移动到另一个，反之亦然.所以代码看起来像这样:

However, when you press 'next' and 'prev', I would like each image to move to the other and vice versa. So the code would look something like this:

<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如下所示:

The jQuery looks like this:

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

样式表:

#slideshow {
    overflow: hidden;
}

因此，想象一下，当您按下"next"(在这种情况下为#right-arrow")时，并且您处于幻灯片放映的原始状态，应该发生的情况是image2应该滑到image1的位置，而image 3现在在image2所在的位置可见.

So imagine, when you press 'next' (or '#right-arrow' in this case) - and you are at the original state of the slideshow, what should happen is image2 should slide to image1's position, and image 3 now becomes visible where image2.

再次按下一步，它将继续旋转，现在不再显示图像1和图像2.

Press next again, it continues to rotate and now images1&2 are no longer visible.

按上一个，然后按顺序返回.

Press previous and it goes back through sequentially.

如何为该功能修改此插件?

How do I modify this plugin for that functionality?

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

I tried a number of different things, including having each image be on a different slide - but my implementation never worked out.

有什么想法吗?

推荐答案

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

Try jCarousel or jCarouselLite for this behavior.

这篇关于如何为两张幻灯片而不是一张幻灯片修改jQuery cycle插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！