A horizontally scrollable slide container with scroll-snap, optional arrow navigation,
and a companion CarouselIndicator for dot-based navigation.
Both components sync through a shared bind:currentIndex.
Provide an items array and a children snippet. Built-in arrow buttons handle navigation; scroll-snap keeps slides
perfectly aligned.
Share bind:currentIndex between Carousel and CarouselIndicator. Clicking a dot scrolls the carousel;
scrolling or swiping updates the active dot.
Use bind:this to get a reference to the carousel instance and
call prev(), next(), or goTo(index) from anywhere. Combine with loop for an infinite experience.
Set showcase to a positive delay in seconds, or a min/max tuple for randomized timing. Automatic advance wraps even without loop. The example starts paused and provides an explicit toggle; the component does not automatically pause on hover or focus.