npm i svelte-light-carousel
pnpm add svelte-light-carousel
yarn add svelte-light-carousel
A simple carousel with no controls or progress bar
A carousel with dots to indicate the current slide
A carousel with a progress bar to indicate the current slide
A carousel with arrows to navigate between slides
A carousel with pagination to navigate between slides
A carousel with responsive layout
A carousel with drag free option
A carousel with auto play option
A carousel with partial view option
A carousel with vertical layout
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<boolean> | 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<number> | 1 | The number of slides to be displayed at a given viewport. |
gap | ResponsiveProperty<number> | 20 | The gap between slides to be displayed at a given viewport. |
partialDelta | ResponsiveProperty<number> | 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. |
Render the slide inside the carousel.
name | type |
---|---|
slide | $$Generic |
inView | boolean |
index | boolean |
Render the previous button.
name | type |
---|---|
canScrollPrev | boolean |
prev | () => void |
Render the next button.
name | type |
---|---|
canScrollNext | boolean |
next | () => void |
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'] |
Render the progress bar indicator.
name | type |
---|---|
progress | number |
scrollTo | (e: PointerEvent) => void |
Render the dots navigation.
name | type |
---|---|
dots | {active: boolean, a11y: DotA11y}[] |
scrollTo | (index: number) => void |