Carousel — usage examples

Carousel ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Carousel } from '@rozie-ui/embla-react';

export function Demo() {
  const [index, setIndex] = useState(0);
  return (
    <Carousel
      slides={['A', 'B', 'C']}
      selectedIndex={index}
      onSelectedIndexChange={setIndex}
      loop
      onSelect={(i) => console.log('snap', i)}
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Carousel from '@rozie-ui/embla-vue';

const index = ref(0);
</script>

<template>
  <Carousel
    :slides="['A', 'B', 'C']"
    v-model:selectedIndex="index"
    :loop="true"
    @select="(i) => console.log('snap', i)"
  />
</template>

svelte

<script lang="ts">
  import Carousel from '@rozie-ui/embla-svelte';

  let index = $state(0);
</script>

<Carousel
  slides={['A', 'B', 'C']}
  bind:selectedIndex={index}
  loop
  onselect={(i) => console.log('snap', i)}
/>

import { Component } from '@angular/core';
import { Carousel } from '@rozie-ui/embla-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Carousel],
  template: `
    <Carousel
      [slides]="['A', 'B', 'C']"
      [(selectedIndex)]="index"
      [loop]="true"
      (select)="onSelect($event)"
    />
  `,
})
export class DemoComponent {
  index = 0;
  onSelect(i: number) { console.log('snap', i); }
}

tsx

import { createSignal } from 'solid-js';
import { Carousel } from '@rozie-ui/embla-solid';

export function Demo() {
  const [index, setIndex] = createSignal(0);
  return (
    <Carousel
      slides={['A', 'B', 'C']}
      selectedIndex={index()}
      onSelectedIndexChange={setIndex}
      loop
      onSelect={(i) => console.log('snap', i)}
    />
  );
}

import '@rozie-ui/embla-lit';

// <rozie-carousel> is a custom element. Bind `slides`/`selectedIndex` as
// properties and listen for `selected-index-change` (the two-way change channel)
// + `select`.
const el = document.querySelector('rozie-carousel');
el.slides = ['A', 'B', 'C'];
el.loop = true;
el.addEventListener('selected-index-change', (e) => { el.selectedIndex = e.detail; });
el.addEventListener('select', (e) => console.log('snap', e.detail));

Imperative handle

Beyond props and events, Carousel exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Carousel, type CarouselHandle } from '@rozie-ui/embla-react';

const carousel = useRef<CarouselHandle>(null);
// <Carousel ref={carousel} ... />
carousel.current?.scrollNext();
const i = carousel.current?.getSelectedIndex();

vue

<script setup>
import { ref } from 'vue';
const carousel = ref();      // template ref
</script>

<template>
  <Carousel ref="carousel" ... />
  <button @click="carousel.scrollNext()">Next</button>
</template>

svelte

<script>
  let carousel;              // component instance via bind:this
</script>

<Carousel bind:this={carousel} ... />
<button onclick={() => carousel.scrollNext()}>Next</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Carousel) carousel!: Carousel;  // or the viewChild() signal
  next() { this.carousel.scrollNext(); }
  current() { return this.carousel.getSelectedIndex(); }
}

tsx

import { Carousel, type CarouselHandle } from '@rozie-ui/embla-solid';

let handle: CarouselHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Carousel ref={(h) => (handle = h)} ... />;
handle?.scrollNext();
const i = handle?.getSelectedIndex();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-carousel');
el.scrollNext();
const i = el.getSelectedIndex();

Carousel — usage examples ​

Usage ​

Imperative handle ​

See also ​

Carousel — usage examples

Usage

Imperative handle

See also