Svelte light carousel

A lightweight carousel component for Svelte focused on low runtime and minimalism.

``bash
npm i @cmdjs/svelte-light-carousel
pnpm add @cmdjs/svelte-light-carousel
yarn add @cmdjs/svelte-light-carousel
`

Usage

`svelte







``

Features

- Lightweight, no dependencies < 2kb of JS and < 2kb of Svelte
- Rely on CSS for layout => no shifting
- Enough features to cover most basic (e-commerce) use cases
- 100% headless and customizable
- Slots for arrows, pagination, progress bar, and dots, so you can build your own UI
- Rely on CSS native scroll behavior on mobile and mouse wheel on desktop
- Accessible WAI-ARIA compliant + good semantic structure
- Preserve trackpad and mouse wheel's native behavior
- Performant, no complicated calculation, rely on RAF for sliding animations
- Can show partial view of the next slide
- Responsive properties: layout, gap, delta and native scroll disabling
- Snapping and drag free option
- Auto play with pause on hover option
- Vertical layout option (with auto height calculation enabled by default, but can be disabled)
- SSR friendly
- Disable click on child when dragging
- Won't crush your lighthouse score at all

Props

| Name | Type | Default | Description |
| ------------------- | --------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------- | ------------------------- |
| id | string | random | The base id for the carousel and its accessible properties. |
| slides | $$Generic[] | [] | The slides to be rendered. |
| withGrabCursor | boolean | true | Whether the cursor should change to a grab cursor when hovering over the carousel. |
| key | keyof Slide | undefined | Property of the slide to use as a key in the eached block. |
| axis | "x" | "y" | x | The axis of the carousel. |
| dragFree | boolean | false | Whether the carousel should be able to be dragged freely. |
| disableNativeScroll | ResponsiveProperty | false | Whether the native scroll should be disabled. |
| oneAtTime | boolean | false | Whether only one slide should be scrolled at a time. |
| autoHeight | boolean | axis === "y" | Whether the carousel should compute its height itself. This introduce a layout shift when the carousel is loaded. |
| autoPlay | number | 0 | The number of seconds between each slide. 0 means it's disabled. |
| layout | ResponsiveProperty | 1 | The number of slides to be displayed at a given viewport. |
| gap | ResponsiveProperty | 20 | The gap between slides to be displayed at a given viewport. |
| partialDelta | ResponsiveProperty | 0 | The amount of visible pixels of the next slide |
| class | string | "" | The class of the carousel slider container. |
| containerClass | string | "" | The class of the carousel container. |
| slideClass | string | "" | The class of the carousel slide. |

Slots

$3

Render the slide inside the carousel.

| Name | Type |
| ------ | --------- |
| slide | $$Generic |
| inView | boolean |
| index | boolean |

$3

Render the previous button.

| Name | Type |
| ------------- | ---------- |
| canScrollPrev | boolean |
| prev | () => void |

$3

Render the next button.

| Name | Type |
| ------------- | ---------- |
| canScrollNext | boolean |
| next | () => void |

$3

Render the pagination. Useful if you want to group prev and next together.

| Name | Type |
| ------------- | ------------------- |
| canScrollPrev | boolean |
| prev | typeof prev |
| canScrollNext | boolean |
| next | typeof next |
| nextA11y | ButtonsA11y['a11y'] |
| prevA11y | ButtonsA11y['a11y'] |

$3

Render the progress bar indicator.

| Name | Type |
| -------- | ------------------------- |
| progress | number |
| scrollTo | (e: PointerEvent) => void |

$3

Render the dots navigation.

| Name | Type |
| -------- | ---------------------------------- |
| dots | {active: boolean, a11y: DotA11y}[] |
| scrollTo | (index: number) => void |