# 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, and keeps every matching invoker's `disabled` state in sync with whichever scroll edge the viewport currently sits at.

```ts
import { carouselControls } from "@sdxc/ui/mixins";
```

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

```ts
carouselControls(): MixinDescriptor<HTMLElement>
```

## Examples

```tsx
<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.

#### Signature

```ts
const CAROUSEL_SLIDE_ATTRIBUTE = "data-carousel-slide"
```