Does anyone have experience using mapping with react bootstrap carousel? I'm having trouble getting it to work properly.
import React from "react";
import "../../styles/Banner.css";
import Carousel from "react-bootstrap/Carousel";
const data = [
"https://rukminim1.flixcart.com/flap/1680/280/image/1defb861e409319b.jpg?q=50",
" https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
"https://rukminim1.flixcart.com/flap/1680/280/image/8d4150cc4f3f967d.jpg?q=50",
"https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
];
const Banner = () => {
return (
<Carousel className="carasousel">
<Carousel.Item>
{data.map((imag, i) => {
return (
<>
<img src={imag} alt="img" key={i} className="banner_img" />
</>
);
})}
</Carousel.Item>
</Carousel>
);
};
export default Banner;
The carousel is displaying all four items at once instead of one. How can I fix this issue?
Another concern I have is removing the lower slide indicator from the carousel. Is there a way to do this?