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.
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>