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.

Get pictures from folder with javascript to my website

I have a local website with .html file and I want my slideshow to automatically display pictures from a folder and display them without the need to add it manually one by one.
Right now I have to add for every new image I want.
Here is my code:
<img class="mySlides myImg" src="Images/Image_01.jpeg" alt="01" width="620" height="340">
<img class="mySlides myImg" src="Images/Image_02.jpeg" alt="02" width="620" height="340">
<!-- Slider Image Script -->
<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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>

How to make carousel transition automatically?

I have the following html, css and script and would like the carousel to switch between the 3 slides automatically as well as give users the option to jump around using the dots. What am I missing?
Live here – https://www.assemblyresearch.co.uk/
Thanks!
<script>
var slideIndex = 1;
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("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 = "block";
dots[slideIndex-1].className += " active";
}
</script>

How about you try something like this:
<script>
var slideIndex = 1;
setInterval(function(){
showSlides(slideIndex);
slideIndex++;
}, 1000);
...
</script>
This just adds a setInterval() function that iterates every second that just calls the showSlides function and increases the index by one. If you are not familiar with the setInterval function you can think it as a timer that ticks every X milliseconds where X is the number at the end of the function. This one for example ticks every second.
EDIT
I also suggest you think how to manage when the counter goes higher than your maximum slide number. I would just do a simple math function like so: slideIndex = (slideIndex + 1) % slides.lenght. The problem is that you do not have the object slides at that scope so you should bring it out of the showSlides function.

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?