I’m trying to create an automatic slider, I can go through the images using the buttons to change them, but them don’t change automatically and I don’t know why, also the first end button doesn’t work properly at the beginning of the slider.
This is the HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/estilos.css"/> <script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script> <script src="js/Script1.js" ></script> <title>Slider exercise </title> </head> <body> <div class="slider-banners"> <button class="slider-button_left" style="left: 30px;" onclick="side_button(-1)"><i class="fa-solid fa-angle-left" style="font-size: 30px; color: #ffffff;"></i></button> <div class="sliderbox"> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore1.jpg"></div></a> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore2.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore3.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore4.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore5.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore6.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore7.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore8.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore9.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore10.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore11.jpg"></a></div> <div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore12.jpg"></a></div> </div> <button class="slider-button_right" style="right: 30px;" onclick="side_button(1)"><i class="fa-solid fa-angle-right" style="font-size: 30px; color: #ffffff;"></i></button> <ul class="slider-selectors_buttons"> <li><button class="dissable-s" onclick="button_selector(1)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(2)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(3)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(4)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(5)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(6)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(7)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(8)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(9)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(10)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(11)" type="button" ></button></li> <li><button class="dissable-s" onclick="button_selector(12)" type="button" ></button></li> </ul> </div> </body> </html>
This is the CSS code:
*{ box-sizing: border-box; margin: 0; padding: 0; } body{ font-family: 'Times New Roman', Times, serif; background-color: #4d4d4d; margin: 0; padding: 0; } .slider-banners{ display: flex; height: auto; width: 100%; position: relative; } .sliderbox{ height: 380px; width: 100%; display: flex; overflow: hidden; } .sliderbox_image{ display: flex; height: auto; width: 100%; } .slider_image img{ width: 100%; height: auto; } .slider-button_left, .slider-button_right{ position: absolute; display: block; padding: 8px; background-color: #66323129; align-self: center; border: none; border-radius: 5px; transition: 0.4s ease; } .slider-button_left:hover, .slider-button_right:hover{ background-color: #663231f0; transform: translateX(2px); padding: 10px; } .slider-selectors_buttons{ display: flex; width: 100%; position: absolute; list-style: none; bottom:0; justify-content: center; } .dissable-s{ width: 20px; height: 20px; border-radius: 50%; margin: 15px 5px; cursor: pointer; background-color: #66323129; border-color: #000000a0; } .dissable-s:hover{ background-color: #663231f0; border-color: #000000cb; } .active-s{ width: 20px; height: 20px; border-radius: 50%; margin: 15px 5px; cursor: pointer; background-color: #F47B3E; border-color: #000000cb; }
And this is the JavaScript code:
let countvalue = 1; function side_button(i){showImg(countvalue += i);} function button_selector(i){showImg(countvalue = i);} function showImg(i){ let n; const img = document.querySelectorAll('.sliderbox img'); const buttons = document.querySelectorAll('.slider-selectors_buttons button'); if(i < 1){countvalue = img.length} if(i > img.length){countvalue = 1} for(n = 0; n < img.length; n++){ img[n].style.display = "none"; } for(n = 0; n < buttons.length; n++){ buttons[n].className = buttons[n].className.replace("active-s", "dissable-s"); } img[countvalue - 1].style.display = "block"; buttons[countvalue - 1].className = "active-s"; } function timeo(countvalue){ setTimeout(showImg, 200); showImg(countvalue); }
I appreciate any help or advice you can give me in order to solve this problem.
Advertisement
Answer
I made a lot of change for you code html css and javascript
I hope this help you and this what you need.
let sliderBanners = document.querySelector(".slider-banners"), dots = document.querySelectorAll(".slider-selectors_buttons li"), sliderContent = document.querySelectorAll(".slider-banners .sliderbox_image"), leftArrow = document.querySelector(".slider-button_left"), rightArrow = document.querySelector(".slider-button_right"), sliderSpeed = 4500, currentSlide = 0, currentActive = 0, sliderTimer; console.log(leftArrow); window.onload = function() { function playSlide(slide) { for (let i = 0; i < dots.length; i++) { sliderContent[i].classList.remove("active"); sliderContent[i].classList.remove("inactive"); dots[i].classList.remove("active"); } if (slide < 0) { slide = currentSlide = sliderContent.length - 1; } if (slide > sliderContent.length - 1) { slide = currentSlide = 0; } if (currentActive != currentSlide) { sliderContent[currentActive].classList.add("inactive"); } sliderContent[slide].classList.add("active"); dots[slide].classList.add("active"); currentActive = currentSlide; clearTimeout(sliderTimer); sliderTimer = setTimeout(function() { playSlide((currentSlide += 1)); }, sliderSpeed); } leftArrow.addEventListener("click", () => { playSlide((currentSlide -= 1)); }); rightArrow.addEventListener("click", () => { playSlide((currentSlide += 1)); }); for (let j = 0; j < dots.length; j++) { dots[j].addEventListener("click", () => { playSlide((currentSlide = dots.indexOf(this))); }); } playSlide(currentSlide); };
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Times New Roman", Times, serif; background-color: #4d4d4d; margin: 0; padding: 0; } .slider-banners { display: flex; justify-content: center; height: auto; width: 100%; position: relative; } .sliderbox { position: relative; height: 380px; width: 100%; text-align: center; overflow: hidden; } .sliderbox_image { position: absolute; display: flex; align-items: center; justify-content: center; height: auto; width: 100%; opacity: 0; } .sliderbox_image.inactive { opacity: 1; } .sliderbox_image.active { opacity: 1; position: relative; } .slider_image img { width: 100%; height: auto; text-align: center; } .slider-button_left, .slider-button_right { position: absolute; display: block; padding: 8px; background-color: #66323129; align-self: center; border: none; border-radius: 5px; transition: 0.4s ease; z-index: 1000; cursor: pointer; } .slider-button_left:hover, .slider-button_right:hover { background-color: #663231f0; transform: translateX(2px); padding: 10px; } .slider-selectors_buttons { display: flex; width: 100%; position: absolute; list-style: none; bottom: -30px; justify-content: space-evenly; } .slider-selectors_buttons li { width: 15px; height: 15px; border-radius: 50%; border: 1px solid black; } .slider-selectors_buttons li.active { background-color: black; } .dissable-s { width: 20px; height: 20px; border-radius: 50%; margin: 15px 5px; cursor: pointer; background-color: #66323129; border-color: #000000a0; } .dissable-s:hover { background-color: #663231f0; border-color: #000000cb; } .active-s { width: 20px; height: 20px; border-radius: 50%; margin: 15px 5px; cursor: pointer; background-color: #f47b3e; border-color: #000000cb; }
<div class="slider-banners"> <button class="slider-button_left" style="left: 30px;"><i class="fa-solid fa-angle-left" style="font-size: 30px; color: #ffffff;"></i></button> <div class="sliderbox"> <div class="sliderbox_image active"><img src="img/Slider/BannerStore1.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore2.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore3.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore4.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore5.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore6.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore7.jpg"></div> <div class="sliderbox_image"><img src="img/Slider/BannerStore8.jpg"></div> </div> <button class="slider-button_right" style="right: 30px;"><i class="fa-solid fa-angle-right" style="font-size: 30px; color: #ffffff;"></i></button> <ul class="slider-selectors_buttons"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>