Framework Guides
Svelte and SvelteKit
Use Blossom Carousel in Svelte and SvelteKit with keyed each blocks and global stylesheet imports.
Install
pnpm add @blossom-carousel/svelte
bun add @blossom-carousel/svelte
yarn add @blossom-carousel/svelte
npm install @blossom-carousel/svelte
Svelte usage
<script>
import BlossomCarousel from "@blossom-carousel/svelte";
import "@blossom-carousel/core/style.css";
const slides = Array.from({ length: 12 }, (_, index) => index + 1);
</script>
<BlossomCarousel>
{#each slides as slide (slide)}
<div>Slide {slide}</div>
{/each}
</BlossomCarousel>
SvelteKit setup
Import the core stylesheet from the root layout.
src/routes/+layout.svelte
<script>
import "@blossom-carousel/core/style.css";
</script>
<slot />
Then import the component in the page or component that renders the carousel.
<script>
import BlossomCarousel from "@blossom-carousel/svelte";
</script>
<BlossomCarousel>{/* slides */}</BlossomCarousel>
Semantic root element
<BlossomCarousel as="ul">
{#each slides as slide (slide)}
<li>Slide {slide}</li>
{/each}
</BlossomCarousel>
Button controls
Navigate the carousel programmatically with prev() and next().
<script>
import BlossomCarousel from "@blossom-carousel/svelte";
let blossomCarousel;
</script>
<BlossomCarousel bind:this={blossomCarousel}>
<!-- slides -->
</BlossomCarousel>
<button onclick={() => blossomCarousel.prev()}>Prev</button>
<button onclick={() => blossomCarousel.next()}>Next</button>
Overscroll API
Tap into Blossom's drag engine's overscroll behavior to create your own style.
<script>
let blossomCarousel;
function onOverscroll(event) {
// prevent and overwrite Blossom's default rubberbanding effect
event.preventDefault();
const overScroll = event.detail.left;
Array.from(blossomCarousel?.children ?? []).forEach((slide) => {
slide.style.transform = `scale(${1 - overScroll * 0.1})`;
});
}
</script>
<BlossomCarousel bind:this={blossomCarousel} on:overscroll={onOverscroll}>
{#each Array.from({ length: 12 }, (_, index) => index + 1) as slide (slide)}
<div>Slide {slide}</div>
{/each}
</BlossomCarousel>