I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{Videos}
</div>
</div>
This is my Videos array
const Videos = VIDEOS.map((vid) => {
if(vid.name=="Video1"){
vari=true;
}
return (
<div
className={vari?"carousel-item active":"carousel-item"}
style={{ width: "25vw", height: "5vh", background: "#F1F1F1",margin:"auto" }}
>
<img src="..." class="card-img-top" alt={vid.name}></img>
</div>
);
});