Problem Statement
What are best practices for a carousel in terms of performance and accessibility?
Explanation
Use lightweight images and moderate intervals to keep performance smooth. Pause autoplay on hover and provide visible navigation controls. On mobile, prefer manual swipe gestures over constant auto-rotation.
Add aria labels to controls and alt text to images. If the carousel content is essential, consider using a static layout instead to avoid accessibility issues.
Code Solution
SolutionRead Only
<div id='hero' class='carousel slide' data-bs-ride='carousel' data-bs-interval='4000'>...</div>
