Build an image carousel

• Shows one slide at a time with previous and next buttons and a row of dots; the active dot is highlighted and clicking a dot jumps to that slide
• Infinite loop: next on the last slide goes to the first, and previous on the first goes to the last, with a smooth transition
• Autoplay advances every few seconds and pauses on hover and keyboard focus; it stops permanently if the user navigates manually (or resumes after a delay)
• Touch and mouse swipe: dragging past a threshold changes slide; a short drag snaps back
• Images load lazily: only the current and adjacent slides load, using loading="lazy" or on demand
• Keyboard: Arrow Left and Right change slides when the carousel is focused
• Accessibility: role="region" with aria-roledescription="carousel", slides labelled "2 of 5", and autoplay respects prefers-reduced-motion

Only after every requirement works.

• Pause autoplay when the tab is hidden or the carousel is out of view (IntersectionObserver)
• Thumbnails and a progress bar for the autoplay timer
• Variable number of visible slides per breakpoint