johannes999 Posted January 12, 2023 Share Posted January 12, 2023 Hello, I have been for while looking for how to create slider show in JS and I found the code in w3school so I have studied and use it . this is my JS code before I ask my question: <script> let slideIndex = 0; let timeoutId = null; const slides = document.getElementsByClassName("mySlides"); const dots = document.getElementsByClassName("dot"); showSlides(); function currentSlide(index) { slideIndex = index; showSlides(); } function plusSlides(step) { if(step < 0) { slideIndex -= 2; if(slideIndex < 0) { slideIndex = slides.length - 1; } } showSlides(); } function showSlides() { for(let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; dots[i].classList.remove('active'); } slideIndex++; if(slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].classList.add('active'); if(timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(showSlides, 5000); // Change image every 5 seconds } </script> it is working OK when you look on my url. 1 problem exists I want to add on the top of the sliders in 3 column some small texts so I created 1 div with 3 classes it didn't work I had to use big minus numbers to bring those texts on the top of the sliders . I thought I create this div with 3 classes in the JS self and solve the problem. and I think it has to be I searched in google how to add id with 3 classes in javascript code . I found many and tried but it didn't work. I have found chat GPT through someone and tried it . it has created to me this JS code : var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; slides[slideIndex-1].id = "myId"; slides[slideIndex-1].classList.add("class1", "class2", "class3"); } this code didn't work because of this 2 lines: slides[slideIndex-1].id = "myId"; slides[slideIndex-1].classList.add("class1", "class2", "class3"); to be sure I inserted this 2 line code in my own JS code above it didn't work either. I am sure that it has to be to create ID with 3 classes in JS slider show code and style it in CSS. I am asking this question for someone hoe knows very good or is expert in Javascript. how I can solve this problem or how I can create ID with 3 classes in the code above (first JS CODE above) not the second which is created with chat GPT. and where exactly insert it in the code above? thanks 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