Blossom Carousel

A native-scroll-first carousel enhanced with drag support for Vue.

Installation

npm install @blossom-carousel/vue

Vue

import { BlossomCarousel } from "@blossom-carousel/vue";
import "@blossom-carousel/core/style.css";

const app = createApp({});
app.component("BlossomCarousel", BlossomCarousel);

Nuxt

Install globally plugins/blossom-carousel.js

import { BlossomCarousel } from "@blossom-carousel/vue";
import "@blossom-carousel/core/style.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("BlossomCarousel", BlossomCarousel);
});

Usage

<BlossomCarousel>
  <div v-for="i in 12">Slide {{ i }}</div>
</BlossomCarousel>

as

Define the HTMLElement of the carousel root.

<BlossomCarousel as="ul">
  <li v-for="i in 12">Slide {{ i }}</li>
</BlossomCarousel>

Renders as

<ul>
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  ...
</ul>

Methods

Slide to the previous or next element. use the align option to control the alignment of the target element. allowed values are "start" | "center" | "end"

⚠ when scroll-snap is active, the css scroll-snap-align value will be used and the align option will be ignored.

const blossomRef = ref(null);
blossomRef.value.prev({ align: "center" });
blossomRef.value.next({ align: "center" });

Examples

• Simple
• Variable widths
• CSS Grid
• Multiple rows
• Snapping
• Grouping
• Sticky
• Coverflow