https://github.com/hyunbinseo/swipe-scroller
Lightweight Slider and Carousel
https://github.com/hyunbinseo/swipe-scroller
carousel scroller slider svelte
Last synced: 7 months ago
JSON representation
Lightweight Slider and Carousel
- Host: GitHub
- URL: https://github.com/hyunbinseo/swipe-scroller
- Owner: hyunbinseo
- License: mit
- Created: 2023-02-10T15:11:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-11T01:47:37.000Z (over 1 year ago)
- Last Synced: 2025-02-16T11:56:14.797Z (over 1 year ago)
- Topics: carousel, scroller, slider, svelte
- Language: Svelte
- Homepage: https://demo.hyunbin.page/swipe-scroller
- Size: 632 KB
- Stars: 17
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Swipe Scroller for Svelte
Horizontal card slider for the modern web. Requires minimum JavaScript. [Demo]
[demo]: https://demo.hyunbin.page/swipe-scroller
## Features
- **Performant** - scrolling and snapping are powered by CSS, not JS.
- **Accessible** - control with touch, scroll, click[^1], and keyboard[^2].
- **Customizable** - override the provided buttons and the ``.
[^1]: The buttons are shown only when hovered with `@media (pointer: fine)` such as a mouse cursor.
[^2]: For accessibility, wrap the card component with [tabbable elements] such as `` or ``.
[tabbable elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
## Browser Support
Tested on the latest evergreen browsers.
| | Chrome | Safari | Firefox | Safari (iOS) | Samsung Internet |
| --------------------- | ------ | ------ | ------- | ------------ | ---------------- |
| CSS [Scroll Snap] | 69 | 11 | 68 | 11 | 10.1 |
| CSS [Scroll-behavior] | 61 | 15.4 | 36 | 15.4 | 8.2 |
[Scroll Snap]: https://caniuse.com/css-snappoints
[Scroll-behavior]: https://caniuse.com/css-scroll-behavior
## Quick Start
```bash
npm create svelte@latest
npm i swipe-scroller -D
```
Following code is based on [SvelteKit] v1.
[SvelteKit]: https://kit.svelte.dev/
```svelte
import 'swipe-scroller/style';
```
```svelte
import Scroller from 'swipe-scroller/Scroller.svelte';
Swipe Scroller
{#each { length: 5 } as _, index}
Card No. {index + 1}
{/each}
.card {
text-decoration: none;
color: white;
background-color: gray;
width: 80%;
min-width: 224px;
max-width: 296px;
overflow: hidden;
}
.card > img {
display: block;
aspect-ratio: 1;
width: 100%;
}
.card > div {
padding: 1rem;
text-align: center;
}
```
Reference [how it works](docs/how-it-works.md) for an in-depth explanation.
## Events
The following DOM events are [forwarded] to the component.
[forwarded]: https://svelte.dev/tutorial/dom-event-forwarding
- [scroll](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event)
- [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) - limited browser support
```svelte
```
## Options
```typescript
// Optional Component Props
/** Width and height of the clickable control buttons. */
export let buttonWidth = '2.5rem';
/** Horizontal gap between the provided card components. */
export let cardGap = '1.25rem';
/** Hang control buttons on the outer container border. */
export let hangButtons = true;
/** Invert the scroll direction of the control buttons. */
export let invertButtons = false;
```
## Slots
```svelte
```
## Limitations
- JavaScript is required to enable horizontal scroll.
- Card components should have identical width.