I'm attempting to implement a slide show of images with previous and next functionality. When the user clicks "previous," I want the images to slide to the left, and when they click "next," I want the images to slide to the right with a 0.5 second delay to create a smooth animation. Additionally, when the last image is reached and the user clicks "next," I want the images to transition back to the first image in reverse order, and the same behavior for going from the first image to the last when clicking "previous."
I would like to achieve the same effect as shown in this JSFiddle, excluding the automatic timer for moving images and triggers buttons.
The challenge I am facing is that my images do not have a fixed size. Since I use a percentage-based width for responsiveness, I cannot set a specific height for the images.
Implementing the jQuery logic for previous and next actions is straightforward; however, adding the desired animations while toggling the "active" class on the images has proven difficult.
I attempted placing all images side by side within a container and only displaying the first one (setting the container width equal to the image width). This method would allow me to "move" the container to the left when clicking "next" to reveal the next image. Unfortunately, due to the undefined height of the images, they stacked vertically instead of appearing horizontally.
Here is an updated version of the JSFiddle with the current code:
HTML
<div class="images">
<img class="active" src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="previous">previous</div>
<div class="next">next</div>
CSS
img {
width: 100px;
display: none;
float: left;
}
img.active {
display: block;
}
jQuery
$('.next').on('click', function() {
var active = $('img.active');
var next = active.next('img');
if (next.length) {
active.removeClass('active');
next.addClass('active');
} else {
active.removeClass('active');
$('.images img:first').addClass('active');
}
});