[ @sdxc/ui/mixins ]
carouselControls
Handles the --ui-prev, --ui-next, and --ui-goto commands a Carousel's invoker buttons dispatch at its viewport, turning each into an Element.scrollBy() call.
import { carouselControls } from "@sdxc/ui/mixins";Usage
Adds --ui-prev/--ui-next/--ui-goto command handling to a Carousel
viewport, scrolling by page or to a data-slide index and, on every command,
scroll and resize, re-syncing what the invokers say: each --ui-prev/--ui-next
button's disabled state, and aria-current on whichever --ui-goto button names
the slide in view.
Signature
carouselControls(): MixinDescriptor<HTMLElement>Examples
<div id="cart-carousel" mix={carouselControls()}>
<div data-carousel-slide>Slide 1</div>
<div data-carousel-slide>Slide 2</div>
</div>
<button commandfor="cart-carousel" command="--ui-prev">Previous</button>
<button commandfor="cart-carousel" command="--ui-next">Next</button>
<button commandfor="cart-carousel" command="--ui-goto" data-slide="1">Slide 2</button>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
CAROUSEL_SLIDE_ATTRIBUTE
Attribute every Carousel slide exposes itself on. carouselControls
queries every element carrying this attribute beneath the viewport, in
document order, to resolve the slide a --ui-goto command targets.
const CAROUSEL_SLIDE_ATTRIBUTE = "data-carousel-slide"