Picture a slideshow that resembles the one showcased in this link: http://malsup.com/jquery/cycle/div.html, but with only two images instead of three.
Also envision it having two triggers, similar to the demo in the center of this page: http://jquery.malsup.com/cycle/lite/
That's the kind of slideshow I aim to create.
However, I want the images to swap positions when you click 'next' and 'prev'. Thus, the code would appear 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 script would resemble this:
$('#slideshow').cycle({
fx: 'wipe',
timeout: 0,
prev: '#left-arrow',
next: '#right-arrow',
});
The stylesheet for this:
#slideshow {
overflow: hidden;
}
So imagine, when you click 'next' (or '#right-arrow' in this context) - and you are at the initial state of the slideshow, what should occur is image2 sliding to image1's position, and image3 becoming visible in place of image2.
Click next again, the rotation continues and now images1&2 are no longer visible.
Click previous and it navigates back through the sequence.
How can I adapt this plugin to achieve that functionality?
I experimented with various approaches, including placing each image on a separate slide - but my attempts didn't yield the desired outcome.
Any insights or suggestions?