We Keep Coding

javascript slider error while using multiple slides in html

i have a javascript slider in my html website, the code is like below:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000);
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg">
</div>
</div>
this is working fine, now i have added another slider in the same page:
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg">
</div>
</div>
now the issue is its kind of colliding, i think because both has same javascript code, both the slide is calculating total images in both the slides and blank images are coming in both, can anyone please tell me how to fix this, thanks in advance

First: You call the function showSlides() with a param (slideIndex) that isn't necessary, because the function uses the global declared var.
I recommend, to add or remove a class (for example .active) instead of styling with js. The advantage is, that you can get the index in the function via that class instead of using the global var for that:
const active_slide = document.querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
With that in use you can loop through the slideshow-containers without getting trouble with the slideIndex.
Working example:
(i removed the functions plusSlides() and currentSlide(), because they aren't used in that example and at least plusSlides() needs another functionality than showSlides())
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg" alt="Image 4">
</div>
</div>
Example with more sliders and slides:
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 1</div>
<img src="test1.jpg" alt="Image 0">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 3</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 3</div>
<img src="auto2.jpg" alt="Image 4">
</div>
<div class="mySlides fades">
<div class="numbertext">3 / 3</div>
<img src="auto3.jpg" alt="Image 5">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 4</div>
<img src="house1.jpg" alt="Image 6">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 4</div>
<img src="house2.jpg" alt="Image 7">
</div>
<div class="mySlides fades active">
<div class="numbertext">3 / 4</div>
<img src="house3.jpg" alt="Image 8">
</div>
<div class="mySlides fades">
<div class="numbertext">4 / 4</div>
<img src="house4.jpg" alt="Image 9">
</div>
</div>

How to select diferent modals with one function?

i tried the lightbox from W3 school and it works nicely, but if I have more modals on one page the script open all of them together.
Is it possible to set within one script some condition which modal should be opened? Or/and is this the correct way of thinking how to code it?
I omitted from code lower the styling and tons of other content to make it shorter but i didn't do any changes in the original script from W3 except of adding new line of "myModal1" to functions open/closeModal which is the problem i try to solve.
Thank you very much in advance for your answers. :)
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").style.display = "none";
}
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("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;
}
</script>

Will reply according to your code
You have
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
this will open both of the modals together
There are numerous ways to implement this function
A very very basic one : You could add an argument and use an if else-if statement inside the script to specify which one to open
Example :
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal1");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal(id) {
if(id=="myModal")
document.getElementById("myModal").style.display = "block";
else if(id=="myModal1")
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").style.display = "none";
}
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("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;
}
</script>
as you could see the changes:
in the body section:
onclick="openModal("myModal");currentSlide(1)" //first h2 div
onclick="openModal("myModal1");currentSlide(1)" //second h2 div
script section:
function openModal(modal) {
if(modal=="myModal")
document.getElementById("myModal").style.display = "block";
else if(modal=="myModal1")
document.getElementById("myModal1").style.display = "block";
}

change onclick in html to addevent listener

Here I want to change the onclick="currentSlide(1) in my html to a ADDEVENTLISTENER in my javascript. It's an image gallery, all works fine but I want to change the way this action is triggered,
<div class="product__slide-row">
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/1.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="product__row-images">
<img class="demo cursor product__row-img" src="../imgs/productos/licuadora/6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
var slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("product__slide-images");
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";
}

How can I get two slideshows on the same page?

I am creating a website for an assignment and am trying to add a second slideshow to my page, however, when I do so, it moves my first one and all of the pictures to the section that I'm trying to add to. I have an example of my code below - which shows the java I'm using:
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";
}
and the html I have:
main>
<section>
<div class="flex-container">
<div class="flex-child">
<!--------------Shine Falls ----------->
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="Images/Shine Falls/s2.jpg" style="width:100%">
<div class="text">Shine Falls entry</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="Images/Shine Falls/s3.jpg" style="width:100%">
<div class="text">Shine Falls entry</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="Images/Shine Falls/s4.jpg" style="width:100%">
<div class="text">Shine Falls farm track</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="Images/Shine Falls/s5.jpg" style="width:100%">
<div class="text">Shine Falls</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="Images/Shine Falls/s6.jpg" style="width:100%">
<div class="text">Shine Falls base</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<!---Icons under images -->
<div class= "icon-display">
<a><img src="Images/Icons/nodogs.png" alt="No Dogs Allowed" /></a>
<a><img src="Images/Icons/picnictable.png" alt="Picnic Area" /></a>
<a><img src="Images/Icons/toilet.png" alt="Toilets" /></a>
<a><img src="Images/Icons/swimming.png" alt="Swimming Area" /></a>
<a><img src="Images/Icons/nowater.png" alt="No Water" /></a>
<a><img src="Images/Icons/vehicle.png" alt="All Vehicle Access" /></a>
</div>
<p>Shine Falls</p>
</div>
<!--------------Maraetotara Falls----------->
<div class="flex-child">
***[** I WANT TO ADD MY SECOND SLIDESHOW HERE **][1]***
<div>
<img src = "Images/Maraetotara Falls/m1.jpg">
</div>
<div class= "icon-display">
<a><img src="Images/Icons/nodogs.png" alt="No Dogs Allowed" /></a>
<a><img src="Images/Icons/picnictable.png" alt="Picnic Area" /></a>
<a><img src="Images/Icons/toilet.png" alt="Toilets" /></a>
<a><img src="Images/Icons/swimming.png" alt="Swimming Area" /></a>
<a><img src="Images/Icons/nowater.png" alt="No Water" /></a>
<a><img src="Images/Icons/vehicle.png" alt="All Vehicle Access" /></a>
</div>
<p>Maraetotara Falls</p>
<p>frjkfsfapkfnaegjbesjglnsjgbsdkgjbsdjfbdakjbgsjdbgsjbssf
sdjfbsdgbkdsklgnflkdnglkfdnhgfdklnhgkhngklhgf
fndfnf sjkfnshdkghsfhgri... Read More</p>
</div>
</div>
</section>
</main>
I basically want to replicate the slideshow in another section but with different pictures. I have added a picture of what my website looks like below, to help.

Hiding slideshow on click

I'm trying to hide a slideshow when a X button is clicked, but it is not working. I'm not sure if it has anything to do with the "id" or "class", but I've tried everything already and it is not hiding what I want it to. (can't use Jquery, this is for a little school project). I usually can hide everything using that button and function, but I can't make it work with the slideshow.
<div id="slideshow-container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<button id="exit" onclick="hideSlides(this, 'slideshow-container')">
<img id="exit" src="image/exit.png">
</button>
<div class="mySlides fade">
<img src="image/remar1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar8.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose8.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose9.jpg" style="width:100%">
</div>
</div>
//javascript
function hideSlides(){
var slides =
document.getElementsByClassName("mySlides").style.display="none"
}
//css
.mySlides {
display: none;
visibility: visible;
}
img {vertical-align: middle;}
#slideshow-container {
max-width: 1000px;
height: 200px;
left: 10px;
position: relative;
margin: auto;
bottom: 1932px;
visibility: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

document.getElementsByClassName returns a HTMLCollection. So with your current HTML design, you have to iterate over all the selected elements and apply the style you want.
With ES6, you may use Array.from which builds arrays from array-like objects.
You can find the documentation of Array.from here
So you can change your function like this:
function hideSlides(){
var slides = document.getElementsByClassName("mySlides");
Array.prototype.forEach.call(slides, function(el) {
el.style.display = 'none';
});
}

is hideSlides() the function called when you click x? Try declaring the variable, then adding the style:
function hideSlides(){
var slides = document.getElementsByClassName("mySlides")
slides.style.display="none"
}
And in case you want to get rid of the empty space where it was, you will need to change the visibility as well.