Css broken - dots not updating |
Css broken - dots not updating |
Coding fanatic |
Aug 6 2020, 06:22 AM
Post
#1
|
Group: Members Posts: 1 Joined: 6-August 20 Member No.: 27,477 |
I have a manual and automatic slideshow. I have uploaded the project to Glitch. It works in terms of animation, the dots colour turquoise when you click or hover on them but it does not display the active as turquoise when it is cycling though manually. How do I fix this please? Not sure if it's a css or js issue. demo page Glitch |
pandy |
Aug 6 2020, 10:33 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
You have a class .active in the CSS, but I don't see it referred to in the HTML or JS.
I think you need to "add" that class with JS, but only for the relevant dot. I got a bit on the way, by adding the three lines marked with comments below. CODE var slideIndex = 0; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); /* added line 1 */ showSlides(); function showSlides() { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].classList.add("active"); /* added line 2 */ setTimeout(showSlides, 5000); // Change image every 5 seconds } function currentSlide(no) { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex = no; slides[no - 1].style.display = "block"; dots[slideIndex - 1].classList.add("active"); /* added line 3 */ } But with only that, once colored the dot's color of course stays. I thought I could remove it where it shouldn't be in the same way, using... CODE dots[slideIndex - 1].classList.remove("active"); ... but that messed up the whole thing, I'm afraid. I move this to the JavaScript forum since it is a JS problem. Christian can probably help you. He's much better with JS than I am. Also, I fiddled with your stuff at glitch. It seems the changes were saved. I didn't know that, haven't used glitch before. I think I've cleaned it up, but you'd better check. |
pandy |
Aug 6 2020, 11:50 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Jesus christ I'm rusty! dots[i] not dots[slideIndex - 1] should of course be used for the remove part.
Now it should fully work (I hope). CODE var slideIndex = 0; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); /* added line 1 */ showSlides(); function showSlides() { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; dots[i].classList.remove("active"); /* added line 4 */ } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].classList.add("active"); /* added line 2 */ setTimeout(showSlides, 5000); // Change image every 5 seconds } function currentSlide(no) { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; dots[i].classList.remove("active"); /* added line 5 */ } slideIndex = no; slides[no - 1].style.display = "block"; dots[slideIndex - 1].classList.add("active"); /* added line 3 */ } function plusSlides(n) { var newslideIndex = slideIndex + n; if (newslideIndex < 4 && newslideIndex > 0) { currentSlide(newslideIndex); } } |
pandy |
Aug 7 2020, 03:52 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Not what you wanted?
|
Lo-Fi Version | Time is now: 13th May 2024 - 03:04 AM |