We Keep Coding

Repeating Javascript Slideshow

I have a working slideshow, but at the end of the images it just stops. Is there something I can add or change to my code (below) that could have it repeat or loop continuously?
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, 2000); // Change image every 2 seconds
}

You can use setInterval instead of setTimeout
setTimeout() triggers the expression only once whilesetInterval()
keeps triggering expressionregularly after the given interval of time.
(unless you tell it to stop).
=> setInterval(showSlides, 2000)

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.

Add Play/Pause Button To Image slider

I'm trying to add a play and pause button to my image viewer. I have next and prev buttons working fine but would love a play and pause button integrated into my JavaScript.
Can anyone please help out?
Here is a working demo via link Demo
Script:
<div class="w3-container">
</div>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="http://www.chorleyweather.com/forecast-charts/ecmwfcharts/na500hpa_1.png" style="width:95%"></li>
<img class="mySlides" src="http://www.chorleyweather.com/forecast-charts/ecmwfcharts/na500hpa_2.png" style="width:95%"></li>
</div>
<div class="w3-section">
<button class="w3-btn" onclick="plusDivs(-1)"><h6> Prev Image<h6/></button>
<button class="w3-btn" onclick="plusDivs(1)"><h6>Next Image<h6/> </button><h6/>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-red";
}
window.onload = function() {
var image = document.getElementById("img");
function updateImage() {
image.src = image.src.split("?")[0] + "?" + new Date().getTime();
}
setInterval(updateImage, 1000);
}
</script>

A way would be with a boolean which determines if it should be playing or not, and a button that changes the value of that boolean.
button:
<button id="playpause"></button>
updated window.onload = function
window.onload = function() {
var image = document.getElementById("img");
var playing = true;
function updateImage() {
if (playing) {
image.src = image.src.split("?")[0] + "?" + new Date().getTime();
}
}
var playpause = document.getElementById("playpause");
playpause.onclick = function() {
if (playing) {
playing = false;
} else {
playng = true;
}
};
setInterval(updateImage, 1000);
}
Didn't try this, but it should do the trick.

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";
}

HTML5: Position: absolute or/and margin breaks my code

I am trying to make a slideShow kind of thing but I have problems with margin and/or position absolute when I try to reposition buttons When I write:
<style="position: absolute; left: somepx; etc:"></style>
or
<div style="position: absolute; left: somepx; etc:"></div>
my code that is in div breaks For example My button has this code :
<button class="slide" onclick="plusDivs(-1)"
style="margin: 265px;">❮</button>
I have jsCode here :
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
I ALSO have some text They are in class: mySlides
When I run the code The button is repositioned but it doesnt work
Same thing with margin
Help please

It's kinda hard to tell from the code you posted, where the mistake is because it's not included. Please check these things:
The script must be loaded before the html if you want to use onclick
Your Slide-Elements don't have the class mySlides (maybe you gave it accidentaly to the container)
Alternatively you can use an Event on the button instead, because the script you posted works fine:
document.getElementById('btn').addEventListener('click', function() {
plusDivs(-1);
});
Here is a complete Snipptet
var slideIndex = 1;
showDivs(slideIndex);
document.getElementById('btn').addEventListener('click', function() {
plusDivs(-1);
});
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
<div style="position: absolute; left: 50px;"></div>
<div class="mySlides">1</div>
<div class="mySlides">2</div>
<div class="mySlides">3</div>
<button id="btn" class="slide" style="margin: 8px;">❮</button>