Develop Reference

Background-image change in modal javascript

I'm trying something tricky. I'm just trying to amend a javascript code I found to create a modal with slides, and I'm trying to get the background image to change as you scroll through the images. I thought I could just add "return slideIndex;" and a new function that would have a specific background image for every integer (there are 5) of slideIndex. I think I must be misunderstanding the original javascript I am working with.
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlidesE");
var dots = document.getElementsByClassName("demoE");
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";
return slideIndex;
}
function changeBG() {
if (slideIndex === 1) {
document.getElementByClassName(".modalE:before").style.backgroundImage = "linear-gradient(160deg, white, black)";
}
else if (slideIndex === 2) {
document.getElementByClassName(".modalE:before").style.backgroundImage = "linear-gradient(160deg, green, blue)";
}
}

How to run multiple JavaScript sliders on a single page?

I am very new in JavaScript. I have multiple sliders on a single screen. You can see by going on this link: http://iliachtida.sportpolis.gr/play-unit/#
I am running a slider when click on the current product, but my slider behavior goes wrong when I click on the arrow.
When I click on the arrow only one product image is displayed, all the other images are not displayed.
I want to run different sliders for different products. Suppose I have four products on this screen and every product has four images. I want to run first product images on first product arrow click, second product images on second product arrow click, etc. I hope you understand.
I have tried many code, but it does not work for me.
This is my code:
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("size-full");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++)
{
//alret(slideIndex);
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";
}

How to stop the timer from speeding up when i click one of the buttons in javascript within html?

Im trying to make a slideshow of images that changes every 10 seconds but has a button at the bottom where if you clicked on the dot it will take you back to that image. The problem is when I click the of the buttons it speeds the timer up. how do i stop this, so that when i click on the button it resets the timer?
function showSlides() {
var nextSlide = false
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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, 10000, slideIndex++); // Change image every 10 seconds
}

thanks to a comment by Teemu. who showed me how to do it, i applyed it to the code and it works
function timer() {
this.STimer = setTimeout(showSlides, 10000, slideIndex++);
}
function cancelTimer(){
clearTimeout(this.STimer);
}
function currentDiv(n) {
cancelTimer();
showSlides(slideIndex = n);
}
function showSlides() {
var nextSlide = false
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
timer();
}

Slideshow Javascript

Hi I have a slideshow javascript running on my website but it doesn't seem to be working properly when I change the images back and forth and the automaticity doesn't show image 6. Could someone please help me write it up because I have been trying over a month and reached nowhere.
https://wbd-ownwork-13--15nalaas.repl.co/
<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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 2}
slides[slideIndex-2].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>

First of all you need not to add the custom controls for changing the slides because the slide show is more than enough.
And secondly you need to change the entire script to the given script only then it is going to work because rest of your script is messing with the slideshow.
Change the entire script from line 94 to line 125 in your HTML to this -
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var slides = document.querySelectorAll('.mySlides');
for(var i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
slideIndex++;
if(slideIndex > slides.length - 1){slideIndex = 0}
loop();
}
function loop(){
setTimeout(showSlides, 1000);
}
</script>
If still you have a problem the please ask again.

slides hidden on page load, but becomes visible after clicking on dots

It seems there is some error in javascript, please help.
Slides are not visible at page load, but appears o click of dot.
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("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";
}

You are defining all the functions for sliding but it doesn't look like you are calling any of them until a click. Try adding
showSlides() below your code.

Asif Vk could you demonstrate in JSFiddle?