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 | 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

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 |