RickVanLouis Posted February 9, 2018 Share Posted February 9, 2018 (edited) Hi there, Sorry but my JS-Knowledge is very bad. I tried to implement multiple slideshows wthin one website. I used this tutorial. But I'm not able to create more than two slideshows without bugs. I tried to adjust the JS code but wasn't successful. At least I have to implement 4 slideshows. My Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides1, .mySlides2 {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */ .prev:hover, .next:hover { background-color: #f1f1f1; color: black; } </style> </head> <body> <h2 style="text-align:center">Multiple Slideshows</h2> <div class="slideshow-container"> <div class="mySlides1"> <img src="images/gallery/fulls/06.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a> </div> <div class="slideshow-container"> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/02.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/01.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a> </div> <div class="slideshow-container"> <div class="mySlides3"> <img src="images/gallery/fulls/07.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a> </div> <script> var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> Standard code from https://www.w3schools.com/howto/howto_js_slideshow.asp (only JS): var slideIndex = [1,1]; /* Class the members of each slideshow group with different CSS classes */ var slideId = ["mySlides1", "mySlides2"] showSlides(1, 0); showSlides(1, 1); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } Thank you for any help Edited February 9, 2018 by RickVanLouis Link to comment Share on other sites More sharing options...
dsonesuk Posted February 9, 2018 Share Posted February 9, 2018 This is similar to http://w3schools.invisionzone.com/topic/57048-need-two-slideshows-—-both-with-arrow-and-dots/?tab=comments#comment-313452 Link to comment Share on other sites More sharing options...
RickVanLouis Posted February 9, 2018 Author Share Posted February 9, 2018 Yes, thanks. I already read this thread, but unfortunately it doesn't work Link to comment Share on other sites More sharing options...
dsonesuk Posted February 9, 2018 Share Posted February 9, 2018 really? strange how this does works https://www.w3schools.com/code/tryit.asp?filename=FOAHR2CXN2V8 Link to comment Share on other sites More sharing options...
JUANTHE77 Posted January 30 Share Posted January 30 try this code option 1: it is working for me. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none; width: 100%;} /* Slideshow container */ .slideshow { /*NOT slideshow-container*/ max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 0)">❮</a> <a class="next" onclick="plusDivs(1, 0)">❯</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 0)"></span> <span class="dot" onclick="currentDiv(2, 0)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 1)">❮</a> <a class="next" onclick="plusDivs(1, 1)">❯</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 1)"></span> <span class="dot" onclick="currentDiv(2, 1)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 2)">❮</a> <a class="next" onclick="plusDivs(1, 2)">❯</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 2)"></span> <span class="dot" onclick="currentDiv(2, 2)"></span> </div> </div> <hr> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")); showDivs(slideIndex += n, j); } function currentDiv(n, j) { showDivs(slideIndex = n, j); /* showDivs Not showSlides*/ } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = z.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); 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(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html> Link to comment Share on other sites More sharing options...
JUANTHE77 Posted January 30 Share Posted January 30 (edited) opcion 2: i lilke this one much more <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} .mySlides1, .mySlides2, .mySlides3 {display: none} /* add more slides here */ img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */ .prev:hover, .next:hover { background-color: #f1f1f1; color: black; } </style> </head> <body> <h2 style="text-align:center">Multiple Slideshows</h2> <p>Slideshow 1:</p> <div class="slideshow-container"> <div class="mySlides1"> <img src="img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="img_snow_wide.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="img_mountains_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a> </div> <p>Slideshow 2:</p> <div class="slideshow-container"> <div class="mySlides2"> <img src="img_band_chicago.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="img_band_la.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="img_band_ny.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a> <!--notice the slide 3 here chance the class to mySlides3 --> <div class="mySlides3"> <img src="img_band_la.jpg" style="width:100%"> </div> <div class="mySlides3"> <img src="img_band_ny.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">❮</a><!--notice increment (-1, 2) if you have more the nexone should be (-1, 3) etc --> <a class="next" onclick="plusSlides(1, 1)">❯</a> <!--notice increment (1, 2) --> </div> <script> let slideIndex = [1,1]; let slideId = ["mySlides1", "mySlides2", "mySlides3"] /* add the outstanding slides here ["mySlides1", "mySlides2", "mySlides3", "mySlides4" etc*/ showSlides(1, 0); showSlides(1, 1); showSlides(1, 2);/*add the new slider*/ /*showSlides(1, 3) if have more than 3;*/ function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { let i; let x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> Edited January 30 by JUANTHE77 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now