Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beynar/svelte-light-carousel
https://github.com/beynar/svelte-light-carousel
carousel carousel-slider lightweight svelte sveltekit
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/beynar/svelte-light-carousel
- Owner: beynar
- License: mit
- Created: 2023-08-05T14:06:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-18T12:55:47.000Z (over 1 year ago)
- Last Synced: 2024-11-14T23:13:43.642Z (about 2 months ago)
- Topics: carousel, carousel-slider, lightweight, svelte, sveltekit
- Language: Svelte
- Homepage: https://svelte-light-carousel.vercel.app/
- Size: 390 KB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte light carousel
A lightweight carousel component for Svelte focused on low runtime and minimalism.
```bash
npm i svelte-light-carousel
pnpm add svelte-light-carousel
yarn add svelte-light-carousel
```
## Usage
```svelte
import Carousel from 'svelte-light-carousel';
const slides = Array.from({ length: 10 }, (_, i) => ({ title: `${i + 1}` }));
{slide.title}
```
## 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 |