We Keep Coding

I need help to figure out how to loop this slideshow

I have this lovely simple code for a slideshow in javascript and I would like to make it loop. Wondering if someone could help me?
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>```

You should use setInterval instead of setTimeout

How can I change the slide index on a hidden div?

I don't know javascript and could use some help. I have a lightbox that pops up but I can't change the slide index # - it works if it's not hidden. is there a way to fix it? I have 10 images numbered 1-10 for the light box and looking for the first one to pop up to be #10 instead of #1
EXAMPLE:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox - trying to change the "currentSlider" to show in descending order when popped up
<script>
// Open the Modal
function openModal() {
$('#myModal').toggleClass('mod-act');
$("#popOverlay").fadeIn();
}
// Close the Modal
function closeModal() {
$('#myModal').removeClass('mod-act');
$("#popOverlay").fadeOut();
}
var slideIndex = 3;// MY ISSUE STARTS HERE
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

If you can't work with the hidden element, so you can set opacity = 0 instead of display none and set position absolute to make them place in the same line.

simple javascritp Slideshow - adding controls

UPDATED:
Im doing simple lyrics slideshow I used some js slideshow and modified it.
My question is, can it be done more simple way - original code had timed autoplay etc?/
All I want is showing/hidding divs - ordered from first - listing with onclicks on prev/next divs, keys left/right or pgup/pgdn and mouse wheel roll.
CodePen
//slideshow -
//https://www.w3schools.com/howto/howto_js_slideshow.asp
var slideIndex = 1; showSlides(slideIndex);
function plusSlides(n) { showSlides(slideIndex += n); }
function currentSlide(n) { showSlides(slideIndex = n); }
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "flex";
dots[slideIndex-1].className += " active";
}

NodeList returning undefined? Function inside window.onload

So I'm currently building a carousel (code inspired from W3Schools).
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
changeShoeContent(slideIndex-1);
}
This code is inside a window.onload function. The slideshow works, and everything, but for some reason, whenever I try to console.log dots or slides, its returning undefined. The slideshow works, which means that the for loop is able to change the display and class names of the slides and dots nodeList. Am I doing something wrong here, or am I missing something?

Stop Slide Show on mouse over in Javascript

I am using following java-script for a slide show, now I like to pause the loop on mouse-over event on the element "dot", my expertise in java is zero, please help.
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active","");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change text every 5 seconds
}
</script>

A few things. Firstly, I would suggest using setInterval() instead. This allows you to easily stop the timer outside of the function. The syntax is identical to setTimeout(). setInterval() is very similar to setTimeout(), except it will continue to execute the function (the first parameter) until you call clearInterval().
Note that setInterval() (and setTimeout()) returns a value, which can be used for clearInterval() and clearTimeout(), respectively.
Changing your code to utilize setInterval should be fairly straightforward. Given what you have posted above, it might look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active","");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
Note that I save interval as a variable that can be used later to stop the timer.
Once you have made this change, the solution to your main question becomes much easier. You can set up event handlers by adding the following:
function pauseSlides(event)
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides(event)
{
interval = setInterval(showSlides, 5000);
}
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
The entirety of your code, given the above, may now look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active","");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
function pauseSlides()
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides()
{
interval = setInterval(showSlides, 5000);
}
</script>
Additionally, for reference:
setInterval() reference: https://www.w3schools.com/jsref/met_win_setinterval.asp
Events in JavaScript: https://www.w3schools.com/jsref/dom_obj_event.asp

Wonderful Aaron, much appreciated response. I just checked the code and its working perfectly.
Can we modify this code further and on-mouse over event we can go to specific slide? i mean by using the same "dot" element? The dots are representing different slides, so I want if a user trigger mouse over event on any dot, the slide display benith that specific dot element.