goldy19 Posted February 24, 2017 Share Posted February 24, 2017 Hi All! I have two questions. I am still pretty new to Javascript, and I am using the W3.css file. I am trying to accomplish two things that I cannot, and my colleagues cannot figure out. I am taking code that I sourced off of the W3 website. The two things that I am trying to do is to have two image sliders on the same page that run at the same time, and the second thing is to have the images be in a random order. The only javascript that is running is for the second image slider. Any assistance would be wonderful! I am attaching a .zip of the files. Thank you in advance! Trevor demo.zip Link to comment Share on other sites More sharing options...
justsomeguy Posted February 24, 2017 Share Posted February 24, 2017 It sounds like you're re-using IDs or something like that, although I haven't downloaded your zip file, extracted everything, and looked for code. It would be better to just post the code here instead of a zip file. Every ID on a page needs to be unique though, 2 elements can't share one ID. My guess is that's your problem. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2017 Share Posted February 24, 2017 (edited) The trouble is, you are using duplicate function name calls plusDivs(1) showDivs(slideIndex); showDivs(slideIndex += n); So it runs the last duplicate functions, relating to 'myslides2' class name, slideshow, for quick fix/hack change function and function calling as plusDivs2(1) showDivs2(slideIndex); showDivs2(slideIndex += n); for functions related to 'mySlides2' slideshow only. Edited February 24, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2017 Share Posted February 24, 2017 Less of botch up, uses non duplicate function, you just hve to make sure plusDivs 2nd parameter refers to correct slide show index ref, could automate this but haven't time at moment <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" media="screen" href="styles.css"/> <link rel="stylesheet" type="text/css" media="screen" href="w3.css"/> </head> <body> <div id="wrapper"> <div class="slideshow"> <div class="w3-content w3-display-container"> <img class="mySlides slideshowpics" src="images/field4.jpg"> <img class="mySlides slideshowpics" src="images/field1.jpg"> <img class="mySlides slideshowpics" src="images/field2.jpg"> <img class="mySlides slideshowpics" src="images/field3.jpg"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1, 0)">❮</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1, 0)">❯</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> </div> <div class="slideshow"> <div class="w3-content w3-display-container"> <img class="mySlides slideshowpics" src="images/field4.jpg"> <img class="mySlides slideshowpics" src="images/field1.jpg"> <img class="mySlides slideshowpics" src="images/field2.jpg"> <img class="mySlides slideshowpics" src="images/field3.jpg"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1, 1)">❮</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1, 1)">❯</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <script type="text/javascript"> 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")[0]); showDivs(slideIndex += n, j); } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); 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"; } x[slideIndex - 1].style.display = "block"; } </script> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
goldy19 Posted February 25, 2017 Author Share Posted February 25, 2017 This works perfectly. Thank you! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2017 Share Posted February 25, 2017 To randomize images placed after var slideIndex = 1;var z = document.getElementsByClassName("slideshow"); var RandomImgsArray = []; //loop through each class slideshow container elements, and then each element with class myslides for (i = 0; i < z.length; i++) { for (j = 0; j < z[i].getElementsByClassName("mySlides").length; j++) { //add src of img element to array RandomImgsArray[j] = z[i].getElementsByClassName("mySlides")[j].src; } //randomize array src values RandomImgsArray.sort(function(a, { return 0.5 - Math.random(); }); //loop through randomize src array and overwrite current img src attribute value with randomized array value in current slideshow class container for (j = 0; j < RandomImgsArray.length; j++) { z[i].getElementsByClassName("mySlides")[j].src = RandomImgsArray[j]; } } 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