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