Svelte-light-carousel NPM

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.