I am working on customizing the indicators to appear rectangular and cover the full width based on the length of the images, similar to this example:
https://i.sstatic.net/j4yov.png
However, I am currently facing an issue where the divs are always displayed as columns instead of side by side:
import 'react-responsive-carousel/lib/styles/carousel.min.css'
import { Carousel } from 'react-responsive-carousel'
<Carousel
className="flex relative w-full h-[328px] overflow-hidden bg-black mb-[17px]"
showArrows={false}
showThumbs={false}
showStatus={false}
autoPlay
infiniteLoop
renderIndicator={(_, selected, indIndex) => {
console.log('called')
return (
<div className="flex flex-row gap-2">
<div
className="w-[100px] h-[2px]"
style={{
background: selected ? 'red' : 'blue',
}}
></div>
</div>
)
}}
>
{images.map((URL, index) => (
<div className="object-cover h-full w-full">
<img src={URL} key={index} />
</div>
))}
</Carousel>
In the image provided, there are 3 divs - the red one represents the selected indicator, while the blue ones represent the unselected indicators.