I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ensure the slideshow functions properly from the start. Any assistance would be greatly appreciated! Here is the relevant code snippet:
HTML
<div id="slideshow">
<div>
<img src="img/image1.jpg" alt="Image1" class="scale-with-grid" width="100%" height="100%" />
</div>
<div>
<img src="img/image2.jpg" alt="Image2" class="scale-with-grid" width="100%" height="100%" />
</div>
<div>
<img src="img/image3.jpg" alt="Image2" class="scale-with-grid" width="100%" height="100%" />
</div>
</div>
CSS
#slideshow {
margin: auto;
position: relative;
width: 637px;
height: 396px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Javascript
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);
Thank you for your help!