johannes999 Posted January 4, 2023 Share Posted January 4, 2023 hello, I have found this code from code pen for slider show and it is working perfect but when I paste this code in my wordpress I get this problem : https://webdesignleren.com/ the JS code is : <script> let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } 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"; setTimeout(showSlides, 3000); // 3000 = Change image every 3 seconds } </script> HTML CODE is: <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" style="width: 100%" height="750px" /> <div class="text">SLIDE 1/3</div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" style="width: 100%" height="750px" /> <div class="text">SLIDE 2/3</div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" style="width: 100%" height="750px" /> <div class="text">SLIDE 3/3</div> </div> </div> <br/> <div style="text-align: center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> CSS code is : * { box-sizing: border-box; margin:0; padding:0; } .mySlides { display: none; } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 60px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } I checked everything carefully few times but I couldn't find the bug. why it is interrupting , what is the wrong here? thanks Link to comment Share on other sites More sharing options...
johannes999 Posted January 6, 2023 Author Share Posted January 6, 2023 thanks, I have changed animation duration from 1.5s to 4s and the problem is resolved. .fade { animation-name: fade; animation-duration: 4s; } 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