https://github.com/yoonbuck/svelte-snappy-carousel
Page-snapping carousel for svelte
https://github.com/yoonbuck/svelte-snappy-carousel
Last synced: about 1 month ago
JSON representation
Page-snapping carousel for svelte
- Host: GitHub
- URL: https://github.com/yoonbuck/svelte-snappy-carousel
- Owner: yoonbuck
- License: mit
- Created: 2021-09-16T05:09:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-09T23:08:04.000Z (over 3 years ago)
- Last Synced: 2025-04-10T11:18:33.925Z (about 1 month ago)
- Language: Svelte
- Size: 111 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-snappy-carousel
Touch-friendly snappy horizontal carousel for svelte.
[Demo](https://svelte-snappy-carousel.dev.yoonbuck.com/)
## Usage
```svelte
import { Carousel, CarouselItem } from "svelte-snappy-carousel";
Pane 1
...
Pane 2
...
Pane 3
...
```
## Adding controls
Use `slot="inner-controls"` or `slot="outer-controls"` to add controls to the carousel.
`inner-controls` will be placed inside the carousel container; `outer-controls` will be after.
```svelte
←
{position + 1} / {count}
→
.controls {
/* e.g., position absolutely inside carousel container */
}
```
# Limitations
These are some
things to watch out for. Note that these limitations might change in the future.
- **No nested Carousels**
You can't place a `` inside another ``
- **No dynamic content**
You shouldn't add or remove ``s after the parent `` is mounted.
It's okay to use an `{#each}` block if you know the backing array won't change. The contents of the array can change, as long as the `(key)`s stay the same, and the array doesn't grow or shrink.
If you're loading content asynchronously, you should either wrap the entire `` in your `{#await}` block, or place `{#await}` blocks inside of individual `` components.