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:
JavaScript
x
47
47
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<link rel="stylesheet" href="css/estilos.css"/>8
<script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>9
<script src="js/Script1.js" ></script>10
<title>Slider exercise </title>11
</head>12
<body>13
<div class="slider-banners">14
<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>15
<div class="sliderbox">16
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore1.jpg"></div></a>17
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore2.jpg"></a></div>18
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore3.jpg"></a></div>19
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore4.jpg"></a></div>20
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore5.jpg"></a></div>21
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore6.jpg"></a></div>22
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore7.jpg"></a></div>23
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore8.jpg"></a></div>24
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore9.jpg"></a></div>25
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore10.jpg"></a></div>26
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore11.jpg"></a></div>27
<div class="sliderbox_image"><a href="#"><img src="img/Slider/BannerStore12.jpg"></a></div> 28
</div>29
<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>30
<ul class="slider-selectors_buttons">31
<li><button class="dissable-s" onclick="button_selector(1)" type="button" ></button></li>32
<li><button class="dissable-s" onclick="button_selector(2)" type="button" ></button></li>33
<li><button class="dissable-s" onclick="button_selector(3)" type="button" ></button></li>34
<li><button class="dissable-s" onclick="button_selector(4)" type="button" ></button></li>35
<li><button class="dissable-s" onclick="button_selector(5)" type="button" ></button></li>36
<li><button class="dissable-s" onclick="button_selector(6)" type="button" ></button></li>37
<li><button class="dissable-s" onclick="button_selector(7)" type="button" ></button></li>38
<li><button class="dissable-s" onclick="button_selector(8)" type="button" ></button></li>39
<li><button class="dissable-s" onclick="button_selector(9)" type="button" ></button></li>40
<li><button class="dissable-s" onclick="button_selector(10)" type="button" ></button></li>41
<li><button class="dissable-s" onclick="button_selector(11)" type="button" ></button></li>42
<li><button class="dissable-s" onclick="button_selector(12)" type="button" ></button></li>43
</ul>44
</div>45
</body>46
</html>47
This is the CSS code:
JavaScript
1
88
88
1
*{2
box-sizing: border-box;3
margin: 0;4
padding: 0;5
}6
7
body{8
font-family: 'Times New Roman', Times, serif;9
background-color: #4d4d4d;10
margin: 0;11
padding: 0;12
}13
.slider-banners{14
display: flex;15
height: auto;16
width: 100%;17
position: relative;18
}19
20
.sliderbox{21
height: 380px;22
width: 100%;23
display: flex;24
overflow: hidden;25
}26
27
.sliderbox_image{28
display: flex;29
height: auto;30
width: 100%;31
}32
33
.slider_image img{34
width: 100%;35
height: auto;36
}37
38
.slider-button_left, .slider-button_right{39
position: absolute;40
display: block;41
padding: 8px;42
background-color: #66323129;43
align-self: center;44
border: none;45
border-radius: 5px;46
transition: 0.4s ease;47
}48
49
.slider-button_left:hover, .slider-button_right:hover{50
background-color: #663231f0;51
transform: translateX(2px);52
padding: 10px;53
}54
55
.slider-selectors_buttons{56
display: flex;57
width: 100%;58
position: absolute;59
list-style: none;60
bottom:0;61
justify-content: center;62
}63
64
.dissable-s{65
width: 20px;66
height: 20px;67
border-radius: 50%;68
margin: 15px 5px;69
cursor: pointer;70
background-color: #66323129;71
border-color: #000000a0;72
}73
74
.dissable-s:hover{75
background-color: #663231f0;76
border-color: #000000cb;77
}78
79
.active-s{80
width: 20px;81
height: 20px;82
border-radius: 50%;83
margin: 15px 5px;84
cursor: pointer;85
background-color: #F47B3E;86
border-color: #000000cb;87
}88
And this is the JavaScript code:
JavaScript
1
23
23
1
let countvalue = 1;2
function side_button(i){showImg(countvalue += i);}3
function button_selector(i){showImg(countvalue = i);}4
function showImg(i){5
let n;6
const img = document.querySelectorAll('.sliderbox img');7
const buttons = document.querySelectorAll('.slider-selectors_buttons button');8
if(i < 1){countvalue = img.length}9
if(i > img.length){countvalue = 1}10
for(n = 0; n < img.length; n++){11
img[n].style.display = "none";12
}13
for(n = 0; n < buttons.length; n++){14
buttons[n].className = buttons[n].className.replace("active-s", "dissable-s");15
}16
img[countvalue - 1].style.display = "block";17
buttons[countvalue - 1].className = "active-s";18
}19
function timeo(countvalue){20
setTimeout(showImg, 200);21
showImg(countvalue);22
}23
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.
JavaScript
1
48
48
1
let sliderBanners = document.querySelector(".slider-banners"),2
dots = document.querySelectorAll(".slider-selectors_buttons li"),3
sliderContent = document.querySelectorAll(".slider-banners .sliderbox_image"),4
leftArrow = document.querySelector(".slider-button_left"),5
rightArrow = document.querySelector(".slider-button_right"),6
sliderSpeed = 4500,7
currentSlide = 0,8
currentActive = 0,9
sliderTimer;10
console.log(leftArrow);11
window.onload = function() {12
function playSlide(slide) {13
for (let i = 0; i < dots.length; i++) {14
sliderContent[i].classList.remove("active");15
sliderContent[i].classList.remove("inactive");16
dots[i].classList.remove("active");17
}18
if (slide < 0) {19
slide = currentSlide = sliderContent.length - 1;20
}21
if (slide > sliderContent.length - 1) {22
slide = currentSlide = 0;23
}24
if (currentActive != currentSlide) {25
sliderContent[currentActive].classList.add("inactive");26
}27
sliderContent[slide].classList.add("active");28
dots[slide].classList.add("active");29
currentActive = currentSlide;30
31
clearTimeout(sliderTimer);32
sliderTimer = setTimeout(function() {33
playSlide((currentSlide += 1));34
}, sliderSpeed);35
}36
leftArrow.addEventListener("click", () => {37
playSlide((currentSlide -= 1));38
});39
rightArrow.addEventListener("click", () => {40
playSlide((currentSlide += 1));41
});42
for (let j = 0; j < dots.length; j++) {43
dots[j].addEventListener("click", () => {44
playSlide((currentSlide = dots.indexOf(this)));45
});46
}47
playSlide(currentSlide);48
};JavaScript
1
119
119
1
* {2
box-sizing: border-box;3
margin: 0;4
padding: 0;5
}6
7
body {8
font-family: "Times New Roman", Times, serif;9
background-color: #4d4d4d;10
margin: 0;11
padding: 0;12
}13
14
.slider-banners {15
display: flex;16
justify-content: center;17
height: auto;18
width: 100%;19
position: relative;20
}21
22
.sliderbox {23
position: relative;24
height: 380px;25
width: 100%;26
text-align: center;27
overflow: hidden;28
}29
30
.sliderbox_image {31
position: absolute;32
display: flex;33
align-items: center;34
justify-content: center;35
height: auto;36
width: 100%;37
opacity: 0;38
}39
40
.sliderbox_image.inactive {41
opacity: 1;42
}43
44
.sliderbox_image.active {45
opacity: 1;46
position: relative;47
}48
49
.slider_image img {50
width: 100%;51
height: auto;52
text-align: center;53
}54
55
.slider-button_left,56
.slider-button_right {57
position: absolute;58
display: block;59
padding: 8px;60
background-color: #66323129;61
align-self: center;62
border: none;63
border-radius: 5px;64
transition: 0.4s ease;65
z-index: 1000;66
cursor: pointer;67
}68
69
.slider-button_left:hover,70
.slider-button_right:hover {71
background-color: #663231f0;72
transform: translateX(2px);73
padding: 10px;74
}75
76
.slider-selectors_buttons {77
display: flex;78
width: 100%;79
position: absolute;80
list-style: none;81
bottom: -30px;82
justify-content: space-evenly;83
}84
85
.slider-selectors_buttons li {86
width: 15px;87
height: 15px;88
border-radius: 50%;89
border: 1px solid black;90
}91
92
.slider-selectors_buttons li.active {93
background-color: black;94
}95
96
.dissable-s {97
width: 20px;98
height: 20px;99
border-radius: 50%;100
margin: 15px 5px;101
cursor: pointer;102
background-color: #66323129;103
border-color: #000000a0;104
}105
106
.dissable-s:hover {107
background-color: #663231f0;108
border-color: #000000cb;109
}110
111
.active-s {112
width: 20px;113
height: 20px;114
border-radius: 50%;115
margin: 15px 5px;116
cursor: pointer;117
background-color: #f47b3e;118
border-color: #000000cb;119
}JavaScript
1
27
27
1
<div class="slider-banners">2
<button class="slider-button_left" style="left: 30px;"><i class="fa-solid fa-angle-left"3
style="font-size: 30px; color: #ffffff;"></i></button>4
<div class="sliderbox">5
<div class="sliderbox_image active"><img src="img/Slider/BannerStore1.jpg"></div>6
<div class="sliderbox_image"><img src="img/Slider/BannerStore2.jpg"></div>7
<div class="sliderbox_image"><img src="img/Slider/BannerStore3.jpg"></div>8
<div class="sliderbox_image"><img src="img/Slider/BannerStore4.jpg"></div>9
<div class="sliderbox_image"><img src="img/Slider/BannerStore5.jpg"></div>10
<div class="sliderbox_image"><img src="img/Slider/BannerStore6.jpg"></div>11
<div class="sliderbox_image"><img src="img/Slider/BannerStore7.jpg"></div>12
<div class="sliderbox_image"><img src="img/Slider/BannerStore8.jpg"></div>13
</div>14
<button class="slider-button_right" style="right: 30px;"><i class="fa-solid fa-angle-right"15
style="font-size: 30px; color: #ffffff;"></i></button>16
<ul class="slider-selectors_buttons">17
<li class="active"></li>18
<li></li>19
<li></li>20
<li></li>21
<li></li>22
<li></li>23
<li></li>24
<li></li>25
</ul>26
</div>27
<script src="https://kit.fontawesome.com/6b2cfcf1a5.js" crossorigin="anonymous"></script>