Currently, I am testing a slideshow that automatically transitions every 1 second. I have set it up to pause when it reaches the first image. However, when it stops on the initial image and I click the next button, nothing happens. If I try to interact with it in any way, it resumes swiping through the images.
I attempted using while statements but didn't make much progress.
Here's my code:
var i = 0;
var images = [];
var time = 1000;
images[0] = 'michael-baird-14942-unsplash.jpg';
images[1] = 'kees-streefkerk-352781-unsplash.jpg';
images[2] = 'hakon-sataoen-1484216-unsplash.jpg';
images[3] = 'mario-silva-1492028-unsplash.jpg';
images[4] = 'will-turner-1474611-unsplash.jpg';
function changeImg() {
document.slide.src = images[i];
if (i < images.length) {
i++;
} else if (i > 4) {
document.slide.src = images[0];
} else {
i = 0;
}
if (i == 0) {
$('.next').on('click', function() {
i++;
});
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;.slideshow {
width: 100%;
height: 75%;
position: absolute;
top: 42px;
}
.slideshow img {
object-fit: cover;
width: 100%;
height: 100%;
}<div class="slideshow">
<img name="slide" alt="Slideshow Images" width="100%" height="100%">
<a class="next">❯</a>
<a class="prev">❮</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="masterjs.js" charset="utf-8"></script>In the JavaScript section, you can see that it cycles through and halts at the starting image. However, this method isn't ideal for achieving the desired behavior. It should cycle through the images and then pause at the beginning, allowing users to manually navigate through them. Additionally, I aim to incorporate animations between the images, hence, I am seeking alternative methods, preferably utilizing JavaScript/jQuery. Feel free to suggest better approaches or solutions if available.