Is there a way to hide the next and previous arrows on images if there is only one image available? https://i.sstatic.net/vuAIc.png
<Col md={6}>
<Carousel>
{product.image ?
<Carousel.Item>
<img
className="d-block w-100"
src={product.image}
style={{width:'540px', height:'480px'}}
/>
</Carousel.Item> :
<Carousel.Item>
<img
className="d-block w-100"
src={product.image}
style={{width:'540px', height:'480px'}}
/>
</Carousel.Item>
}
{product.imageSecond ?
<Carousel.Item>
<img
className="d-block w-100"
src={product.imageSecond}
style={{width:'540px', height:'480px'}}
/>
</Carousel.Item> :
null
}
// Additional image items check...
</Carousel>
</Col>I attempted to accomplish this using DOM manipulation, but I encountered an issue with the "class is undefined" error. Since I'm not very proficient in CSS and DOM scripting, any guidance on achieving the desired functionality would be highly appreciated.
The goal is to display arrows and bottom indicators for the carousel only when there are two or more images present. Thank you in advance for your assistance!