Svelte light carousel
A lightweight carousel component for Svelte focused on low runtime and minimalism.
npm i svelte-light-carousel
pnpm add svelte-light-carousel
yarn add svelte-light-carousel
Usage
<script>
import Carousel from 'svelte-light-carousel';
const slides = Array.from({ length: 10 }, (_, i) => ({ title: `${i + 1}` }));
</script>
<Carousel {slides}>
<div slot="slide" let:slide>{slide.title}</div>
</Carousel>
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 |
| 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
slide
Render the slide inside the carousel.
| Name | Type |
|---|---|
| slide | $$Generic |
| inView | boolean |
| index | boolean |
prev
Render the previous button.
| Name | Type |
|---|---|
| canScrollPrev | boolean |
| prev | () => void |
next
Render the next button.
| Name | Type |
|---|---|
| canScrollNext | boolean |
| next | () => void |
pagination
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'] |
progress
Render the progress bar indicator.
| Name | Type |
|---|---|
| progress | number |
| scrollTo | (e: PointerEvent) => void |
dots
Render the dots navigation.
| Name | Type |
|---|---|
| dots | {active: boolean, a11y: DotA11y}[] |
| scrollTo | (index: number) => void |
