Slideshow image on modal image

Question

I do not understand how to make the front images (modal image) to slideshow and not the image on the back, because as you can see it moves the image on the back slideshow when I click on the arrow to move the images on the front.

I think the problem is with the "class" "myslides" when I call the second slideshow script it uses the same class myslides as the first one but I have no idea how to solve this.

I also added snippet of my code I can not make it work with shorter code so please forgive me:

 /* Universal reset: */ *{ margin: 0; padding: 0; } /* Article Picture Style */ figure{ border:1px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; } .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } .myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 101; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } /*Dot For Slide*/ .mySlides {display:none } .w3-left, .w3-right, .w3-badge {cursor:pointer} .w3-badge {height:13px;width:13px;padding:0 } .w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} .w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none} .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none} .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%; cursor:pointer; height:15px;width:15px;padding:0} .w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block} .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} :left;border:none;outline:none;white-space:normal;float:none} .w3-responsive{display:block;overflow-x:auto} .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3- .w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} .w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} .w3-left-align{text-align:left}.w3-right-align{text-align:right}.w3-justify{text-align:justify}.w3-center{text-align:center} /* #ccc transparent color */ .w3-border-top{border-top:1px solid #ccc}.w3-border-bottom{border-bottom:1px solid #ccc} .w3-border-left{border-left:1px solid #ccc}.w3-border-right{border-right:1px solid #ccc} .w3-topbar{border-top:6px solid #ccc}.w3-bottombar{border-bottom:6px solid #ccc} .w3-leftbar{border-left:6px solid #ccc}.w3-rightbar{border-right:6px solid #ccc} .w3-section,.w3-code{margin-top:50px;margin-bottom:50px} .w3-button:hover{color:#000;background-color:#ffffffe0} .w3-transparent,.w3-hover-none:hover{color:#fff; background-color:transparent} .w3-hover-none:hover{box-shadow:none} .w3-border-0{border:0!}.w3-border{border:1px solid #fff} .w3-white,.w3-hover-white:hover{color:#000;background-color:#ffffffe0} 

 <!DOCTYPE html> <!-- The new doctype --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Refresh Website Every 5 Second --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--Script Links --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <figure> <!-- The figure tag marks data (usually an image) that is part of the article --> <!-- Image to Slide --> <div class="w3-content w3-display-container"> <img class="mySlides myImg" src="https://girdzijauskas.files.wordpress.com/2017/12/fonas.jpg?w=640" alt="text, text" width="620" height="340"> <img class="mySlides myImg" src="http://img.freepik.com/free-psd/abstract-background-design_1297-87.jpg?size%5Cx3d338%5Cx26ext%5Cx3djpg" alt="Pasta, Special" width="620" height="340"> <img class="mySlides myImg" src="http://xinrenfuyin.org/wp-content/uploads/2017/11/0295.jpg" alt="Pasta, Appetizing" width="620" height="340"> <!-- Make Buttons --> <div class="w3-large w3-text-white "> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button> </div> <!--Make Dots --> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">&times;</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> <!-- Make Buttons --> <div class="w3-large w3-text-white "> <button class="w3-button w3-black w3-display-left" onclick="plusDivs2(-1)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs2(1)">&#10095;</button> </div> <!--Make Dots --> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <span class="w3-badge demo2 w3-border w3-transparent w3-hover-white" onclick="currentDiv2(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv2(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv2(3)"></span> </div> <!-- Slider Image Script --> <script> var slideIndex2 = 1; showDivs2(slideIndex2); function plusDivs2(n) { showDivs2(slideIndex2 += n); } function currentDiv2(n) { showDivs2(slideIndex2 = n); } function showDivs2(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots2 = document.getElementsByClassName("demo2"); if (n > x.length) {slideIndex2 = 1} if (n < 1) {slideIndex2 = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots2.length; i++) { dots2[i].className = dots2[i].className.replace(" w3-white", ""); } x[slideIndex2-1].style.display = "block"; dots2[slideIndex2-1].className += " w3-white"; } </script> </div> <!-- Modal Image Script --> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = $('.myImg'); var modalImg = $("#img01"); var captionText = document.getElementById("caption"); $('.myImg').click(function(){ modal.style.display = "block"; var newSrc = this.src; modalImg.attr('src', newSrc); captionText.innerHTML = this.alt; }); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script> <!-- Slider Image Script --> <script> var slideIndex = 1; showDivs(slideIndex); 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"; } </script> </div> </figure> </body> </html> 

Answer 1

Try appending every element by ID. ids are supposed to be unique on each element, where classes are can be used extensively on many elements. What happens here is that on the first occurence of the class, the code gets executed. But the result is not the one desirable, because the first occurence on the DOM is the "background" slider.