In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, with the first image being the only one displayed upon loading the page. However, clicking the next button immediately jumps from the first image to the fourth. Subsequently, pressing the previous button reveals images one, two, and three.
I am seeking guidance on how to ensure that the images are displayed in sequential order. The code snippet below illustrates my current approach.
https://jsfiddle.net/aj4tpu1z/
var prev = $('.prev');
var next = $('.next');
$('.li').each(function() {
var left = $(this).prev();
var right = $(this).next();
next.on('click', function(){
left.hide();
right.show();
});
prev.on('click', function(){
left.show();
right.hide();
});
});