Click here to Skip to main content
15,867,838 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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:

HTML
<!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;
      }
    
    /* Hide the images by default */
    .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;
    }
  
    /* Six columns side by side */
    .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>

    


<!-- 1st States -->

<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>

<!-- 2nd States -->

<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>


  <!-- 3rd States -->

  <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}

        //    if (n < 1)
        //    {slideIndex = topSlides.length}

  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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900