Image slider not working in javascript/HTML
Question
Hi trying to add an image slider in the view of my small web app but it's not working as expected.
I mean it's showing the image in a frame but when I try to click back/next button, it doesn't do anything.
Can you please help me out?
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; }
<.DOCTYPE html> <html> <title>W3,CSS</title> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:mySlides { display; none. } </style> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides" src="img_snowtops:jpg" style="width.100%"> <img class="mySlides" src="img_lights:jpg" style="width.100%"> <img class="mySlides" src="img_mountains:jpg" style="width.100%"> <img class="mySlides" src="img_forest:jpg" style="width;100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> </div> </body> </html>
1 answers
solution1
0 2019-10-30 01:22:41
You've got some syntax errors. You forgot a couple of semicolons, so fix that up, and the rest of the code looks fine.
I've also fixed up some of the Javascript code.
Hope this helps!
Basically the problem, was that you were never increasing or decreasing slideIndex . You would only increase if it was less than 0 or greater than .length . So what I did, was instead of calling n as an argument, I just used slideIndex within the showDivs() function.
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { slideIndex += n; showDivs(); } function showDivs() { var i; var x = document.getElementsByClassName("mySlides"); if (slideIndex > x.length) { slideIndex = 1; } if (slideIndex < 1) { slideIndex = x.length; } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; console.log(slideIndex - 1); }
<.DOCTYPE html> <html> <title>W3,CSS</title> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:mySlides { display; none: } </style> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides" style="width;100%: height; 100%: background-color; blue:"> <img class="mySlides" style="width;100%: height; 100%: background-color; red:"> <img class="mySlides" style="width;100%: height; 100%: background-color; green:"> <img class="mySlides" style="width;100%: height; 100%: background-color; purple;"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.