Blossom Carousel for Svelte and SvelteKit

<BlossomCarousel> renders a native horizontal scroll container. Layout, slide sizes, gaps, and snapping are plain CSS. Blossom adds mouse dragging with momentum and rubber-banding, and only downloads its drag engine on devices with a fine pointer. Touch devices keep native scrolling.

For migrations from Embla, Swiper, Splide, Slick, or Flickity, use the blossom-carousel-migration skill first.

Setup

npm install @blossom-carousel/svelte

Version 2.x uses Svelte 5 runes and snippets. Write Svelte 5 syntax ($props, onclick, {#snippet}). If the project is on Svelte 4, install @blossom-carousel/svelte@1 and use slots and on: directives instead.

Import the stylesheet once from the root layout: