Horizontal card slider for the modern web. Requires minimum JavaScript. Demo

• Snapping Cards, Smooth Scroll - Powered by CSS, not JS.
• Easy to Use - Just pass the card components to the <slot />.
• Customizable - Override the provided buttons and <noscript>.
• Various Controls - Supports touch, scroll, click¹, and the tab key².
• Light or Dark - The semi-transparent clickable buttons suits both.

Supported and tested on the latest evergreen browsers.

• JavaScript is required to enable horizontal scroll.
• Card components should have identical width.

Reference How it works for in-depth explanation.

1. Prepare a SvelteKit project³.
2. Install the package via npm.
3. Reference the src/routes directory⁴.

For new projects, replace the content of the src/routes folder. Download

• on:scroll - The DOM event is forwarded.

// 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;

<!-- Optional Named Slots -->

<slot name="noscript" />
<slot name="button-prev" />
<slot name="button-next" />