Recently, I developed a small automatic image slider that transitions to a new image every 4 seconds by utilizing the following code:
setInterval(displayImage, 4000);.
The image transitions are functioning correctly; however, there seems to be an issue with the navigation dots. When the first image is displayed, the corresponding dot remains active while the second dot is disabled, which is perfect. But when the image changes to the second one, both dots remain disabled instead of having the first dot disabled and the second dot active.
I have shared my code below for reference:
function displayImage() {
let nodeList = document.querySelectorAll(".sliderimg");
let pointer = document.querySelectorAll("ol.controlnav li a")
for (let i = 0; i < nodeList.length; i++) {
for (let j = 0; j < pointer.length; j++) {
if (nodeList[i].classList.contains("active")) {
nodeList[i].classList.remove("active");
pointer[j].classList.remove("controlactive");
}
nodeList[count].classList.add("active");
pointer[count].classList.add("controlactive")
}
}
count += 1;
if (count == nodeList.length) {
count = 0;
}
}.containimg .sliderimg {
display: none;
}
.containimg .sliderimg.active.imageright {
display: flex;
animation: opac 0.8s;
}
.containimg .sliderimg.active.imageright2 {
display: flex;
animation: opac 0.8s;
}
.containimg .sliderimg.active.imageright3 {
display: block;
position: relative;
}
.imageright {
background-image: url('https://themewagon.github.io/jackson/images/img_bg_2.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
position: relative;
}
.imageright2 {
background-image: url('https://themewagon.github.io/jackson/images/img_bg_1.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: none;
align-items: center;
position: relative;
}
.controlnav {
position: absolute;
text-align: center;
bottom: 20px;
z-index: 1000;
left: 20px;
width: auto;
margin: 0;
padding: 0;
list-style: none;
}
.controlnav li {
margin: 8px;
}
.controlpaging li a {
width: 12px;
height: 12px;
display: block;
cursor: pointer;
text-indent: -9999px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.controlpaging li a.controlactive {
background: rgba(147, 147, 147, 0.795);
}<div class="containimg">
<div class="imageright sliderimg active">
<div class="textimage">
<h1>I am</h1>
<h2>a Designer</h2>
<h3>100% html5 bootstrap templates Made</h3>
<h3>by <a href="#" class="underline">colorlib.com</a></h3>
<button class="viewportfolio mt-4">view portfolio <i
class="fa-solid fa-suitcase"></i></button>
</div>
<ol class="controlnav controlpaging">
<li><a href="#" class="controlactive">1</a></li>
<li><a href="#">2</a></li>
</ol>
</div>
<div class="imageright2 sliderimg">
<div class="textimage">
<h1>Hi!</h1>
<h2>I'm Sarah</h2>
<h3>100% html5 bootstrap templates Made</h3>
<h3>by <a href="#" class="underline">colorlib.com</a></h3>
<button class="viewportfolio mt-4">view portfolio <i
class="fa-solid fa-suitcase"></i></button>
</div>
<ol class="controlnav controlpaging">
<li><a href="#">1</a></li>
<li><a href="#" class="controlactive">2</a></li>
</ol>
</div>
</div>Is there anyone who could provide insight on where I might be making a mistake in my code?