I have a little problem with my setinterval, that is to say that I would like my index to start at -1 as it is when i go to 1 and the index goes to 0 to add d-none but that does not does not give the desired result so if my i === 1 else index ===0 and y cant y have try multiple function but its not good
code html:
<section class="mb-5">
<div class="carou mb-5 pb-5">
<div class="divCarou">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-luxry-sofa.jpg" alt="">
</div>
<div class="divPJS1 pt-3">
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-gloves.jpg" alt="">
</div>
<div class="d-flex justify-content-center gap-4 mt-3">
<div class="bRoun1">
<p>SALE!</p>
</div>
<div>
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-cups.jpg" alt="">
</div>
<div class="divPJS1 pt-3">
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bag.jpg" alt="">
</div>
<div class="d-flex justify-content-center gap-4 mt-3">
<div class="bRoun1">
<p>SALE!</p>
</div>
<div>
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bed.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-modern-sofa.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-shoes.jpg" alt="">
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-tshitr.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-bag-2-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-jacket-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-tshitr-white-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bag.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-cups.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="d-flex gap-3 justify-content-center">
<i class="fa-regular fa-circle btnCarou active"></i>
<i class="fa-regular fa-circle btnCarou"></i>
<i class="fa-regular fa-circle btnCarou"></i>
<i class="fa-regular fa-circle btnCarou"></i>
</div>
</section>
code js:
let i2 = document.querySelectorAll(".btnCarou");
let i3 = document.querySelectorAll(".btnCarou");
let divCarou = document.querySelectorAll(".divCarou");
let divCarou2 = document.querySelectorAll(".divCarou");
function Carou2() {
setInterval( () => {
for (let i = 1, index = 0 ; i < i2.length, index = i3.length; i++ , index++) {
if (![... i2[i].classList].includes("active")) {
i2[i].classList.add("active");
divCarou[i].classList.remove("d-none");
if ([... i3[index].classList].includes("active")) {
i3[index].classList.remove("active");
divCarou2[index].classList.add("d-none");
}
}
}
}, 2000)
}
Carou2()