m.s_shohan Posted November 13, 2016 Share Posted November 13, 2016 Hi, I want to change the background image automatically every 5 second and the indicators should be green. I followed w3schools slideshow tutorial and created this slideshow. But it doesn't seem to work as expectation. Please tell me where I made the mistake. thank you in advance. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .header-slideshow-container { width: 100%; margin: 0; padding: 0; } .header-slide { display: block; width: 100%; height: 100%; margin: 0; padding: 0; } #header-slide1 { background-image: url("http://www.w3schools.com/howto/img_nature_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide2 { background-image: url("http://www.w3schools.com/howto/img_fjords_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide3 { background-image: url("http://www.w3schools.com/howto/img_mountains_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } .current-header-slides-container { position: absolute; top: 45%; right: 25px; margin-top: -30px; } .current-header-slide-indicator { width: 15px; height: 15px; border-radius: 50%; margin-bottom: 5px; background-color: black; } </style> </head> <body> <div class= "header-slideshow-container"> <div class= "header-slide" id= "header-slide1"></div> <div class= "header-slide" id= "header-slide2"></div> <div class= "header-slide" id= "header-slide3"></div> <div class= "current-header-slides-container"> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> </div> </div> <script> var h = window.innerHeight; (function () { 'use strict'; document.getElementsByClassName("header-slideshow-container")[0].style.height = h + 'px'; }()); var headerSlideIndex = 0; headerSlideshow(); function headerSlideshow() { 'use strict'; var i, headerSlides = document.getElementsByClassName("header-slide"), dots = document.getElementsByClassName("current-header-slide-indicator"); for (i = 0; i < headerSlides.length; i++) { headerSlides[i].style.display = "none"; } headerSlideIndex++; if (headerSlideIndex >= headerSlides.length) { headerSlideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].style.backgroundColor = "black"; } headerSlides[i-1].style.display = "block"; dots[i-1].style.backgroundColor = "green"; setTimeout(headerSlideshow, 5000); } </script> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2016 Share Posted November 13, 2016 Wouldn't it be better to use 'headerSlideIndex' instead of 'i', since it will always end with index of last image. :-) Link to comment Share on other sites More sharing options...
m.s_shohan Posted November 13, 2016 Author Share Posted November 13, 2016 I didn't get what you meant. Please tell me in details. Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2016 Share Posted November 13, 2016 (edited) What part of your code uses 'headerSlideIndex' to change background-color and makes slideshow background-image visible using display: block, but is currently using for loop varible 'i', which is outside the for loop anyway. The for loop 'i' variable will always be the highest value after incrementing reaches set limit. Edited November 13, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
m.s_shohan Posted November 14, 2016 Author Share Posted November 14, 2016 Thank you for the suggestion and help. It's working now. 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