My code is 90% alright just not displaying my 2nd and 3rd image gallery topslides, it works when i clicked the 2nd gallery image but then the first one & 3rd one is hide when I clicked them,
I want to add multiple imgae gallery like this also some pages & want that it works like all of the galleries topSlides will display.& if I clicked anyone of them, no galleries will hide,
I think it's function event loop for every page, so please help me to solve my problem please..
What I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stack Overflow qna</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
text-align: center;
}
* {
box-sizing: border-box;
}
p{
margin: 20px;
word-wrap: break-word;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mySlides {
display: none;
max-width: 300px;
max-height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.column {
width: 10%;
border: 1px solid black;
border-radius: 5px;
padding: 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 2px;
}
.columImg {
opacity: 1;
width:100%;
cursor: pointer;
}
.active,
.columImg:hover {
opacity: 1;
}
</style>
</head>
<body>
<!--
<h3 style="text-align:center">Dell laptop display</h3>
<div class="container">
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2016/03/27/07/12/apple-1282241_960_720.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2015/01/09/02/45/laptop-593673_960_720.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2016/11/23/14/37/apple-1853259_960_720.jpg" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/03/27/07/12/apple-1282241_960_720.jpg" onclick="currentSlide(1)" alt="">
</div>
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/01/09/02/45/laptop-593673_960_720.jpg" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/11/23/14/37/apple-1853259_960_720.jpg" onclick="currentSlide(3)" alt="">
</div>
</div>
<!--
<h3 style="text-align:center">MackBook display</h3>
<div class="container">
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2015/09/05/22/33/office-925806_960_720.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2017/06/23/11/49/laptop-2434393_960_720.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_960_720.jpg" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/22/33/office-925806_960_720.jpg" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2017/06/23/11/49/laptop-2434393_960_720.jpg" onclick="currentSlide(5)" alt="">
</div>
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_960_720.jpg" onclick="currentSlide(6)" alt="">
</div>
</div>
<!--
<h3>Dell & Mac laptop display</h3>
<div class="container">
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2016/10/12/13/32/office-1734485_960_720.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2015/09/05/23/54/macbook-926425_960_720.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://cdn.pixabay.com/photo/2015/09/05/19/42/macbook-924781_960_720.jpg" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/10/12/13/32/office-1734485_960_720.jpg" onclick="currentSlide(7)" alt="">
</div>
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/23/54/macbook-926425_960_720.jpg" onclick="currentSlide(8)" alt="">
</div>
<div class="column">
<img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/19/42/macbook-924781_960_720.jpg" onclick="currentSlide(9)" alt="">
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var x;
var topSlides = document.getElementsByClassName("mySlides");
var colImg = document.getElementsByClassName("columImg");
if (n > topSlides.length)
{slideIndex = 1}
for (x = 0; x < topSlides.length; x++) {
topSlides[x].style.display = "none";
}
for (x = 0; x < colImg.length; x++) {
colImg[x].className = colImg[x].className.replace(" active", "");
}
topSlides[slideIndex-1].style.display = "block";
colImg[slideIndex-1].className += " active";
}
</script>
</body>
</html>