I can't seem to figure out how to connect my slider bullets to my slider slides. I want bullet 1 to correspond to slide 1, bullet 2 to slide 2, and so on. It should be a simple task, but I'm struggling to make it work. I have set up a basic reset function that removes the active class from both the bullet and the slide when clicked. Now, I need to add the active class to the clicked bullet and its matching slide.
Any help with this would be greatly appreciated.
var slideBullet = document.querySelectorAll('.slider__bullet');
for (var i = 0; i < slideBullet.length; i++) {
slideBullet[i].addEventListener('click', function() {
var sliderSlide = document.querySelectorAll('.slider__slide');
function resetSlides() {
for (var i = 0; i < sliderSlide.length; i++) {
sliderSlide[i].classList.remove('active');
}
for (var i = 0; i < slideBullet.length; i++) {
slideBullet[i].classList.remove('active');
}
}
});
} .slider {
width: 90%;
height: 100vh;
position: relative;
border: 1px solid black;
margin: 0 auto;
}
.slider__slides {
position: absolute;
top: 0;
left: 0;
right: 0;
display: none;
text-align: center;
margin: 0 auto;
}
.slider__slides.active {
display: block;
}
.slider__bullets {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
}
.slider__bullet {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #a3a3a3;
cursor: pointer;
margin-left: 10px;
}
.slider__bullet.active {
background-color: grey;
transform: scale(1.8);<div class="slider">
<div class="slider__slides active">1</div>
<div class="slider__slides">2</div>
<div class="slider__slides">3</div>
<div class="slider__slides">4</div>
<div class="slider__slides">5</div>
<div class="slider__bullets">
<div class="slider__bullet active"></div>
<div class="slider__bullet"></div>
<div class="slider__bullet"></div>
<div class="slider__bullet"></div>
<div class="slider__bullet"></div>
</div>
</div>