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

JS controls wont work on 2nd slider, not sure how to target

I'm working on a website that has 2 sliders but the controls on the top slider do not seem to function
http://www.nathangriffithgc.com/gallery.html
How can I target the second slider? I've already changed the ID names but I'm not sure if that is affecting the slider.
Below is a snippet of both my galleries, you'll find that I renamed the top scripts the slides2, the bottom script is the original that works
<script>
var slideIndex = 1;
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) {slideIndex = 1;}
if (slideIndex < 1) {slideIndex = slides.length;}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
var dots = document.getElementsByClassName("slide-dot");
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" slide-dot-active", "");
}
dots[slideIndex-1].className += " slide-dot-active";
}
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
var slide2Index = 1;
function showSlides2() {
var slides = document.getElementsByClassName("mySlides2");
if (slide2Index > slides.length) {slide2Index = 1;}
if (slide2Index < 1) {slide2Index = slides.length;}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide2Index-1].style.display = "block";
var dots = document.getElementsByClassName("slide2-dot");
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" slide2-dot-active", "");
}
dots[slideIndex-1].className += " slide2-dot-active";
}
function plusSlides(n) {
slide2Index += n;
showSlides2();
}
function currentSlide(n) {
slide2Index = n;
showSlides2();
}
window.addEventListener("load", showSlides); window.addEventListener("load", showSlides2);
</script>

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?

javascript automatic image slides

i want to make slide images to automatically replace. Here is code i use for manual replacing by clicking on buttoms. Sorry if it is some basics issue, but i don't realy use javascript. I've got it from w3schools, and try to combine the automatic replacing and this, but didn't work.
Thanks for answers.
PS: There are 3 images now and 4 will be.
var slideIndex = 1;
showDivs();
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";
x[slideIndex-1].style.width = "784px";
x[slideIndex-1].style.height = "350px";
}

The thing you need to do is continuously call the function for changing the slides in certain intervals. I am adding the complete code after making changes for the same.
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";
}
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var index = 0;
setInterval(function() {
index++;
if( self.index == self.slides.length ) {
index = 0;
}
currentSlide( index );
}, 2000);
Instead of 2000, you can give any delay you need. Think this solves your problem.

Javascript Photo Slideshow Code

This code is from W3schools for a photo slideshow and I just wanted to know what each line means and what it does. Thank you.
<script>
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");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
</script>