Question

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

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

That’s what I want to build.

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>

The jQuery looks like this:

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

The stylesheet:

#slideshow {
    overflow: hidden;
}

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.

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.

Any ideas?

Answer 1

Try jCarousel or jCarouselLite for this behavior.