Carousel

import { Carousel } from 'fluxo-ui';
import type { CarouselSlide } from 'fluxo-ui';

const slides: CarouselSlide[] = [
  { id: 's1', type: 'image', src: '/photo1.jpg', alt: 'Mountain landscape' },
  { id: 's2', type: 'image', src: '/photo2.jpg', alt: 'Ocean sunset' },
  { id: 's3', type: 'image', src: '/photo3.jpg', alt: 'City skyline' },
];

<Carousel slides={slides} />

import { Carousel } from 'fluxo-ui';

<Carousel
  slides={slides}
  navigation="thumbnails"
  thumbnailPosition="bottom"
/>

import { Carousel } from 'fluxo-ui';
import { EditIcon, PlusIcon, TrashIcon } from 'fluxo-ui/icons';

<Carousel
  slides={slides}
  navigation="thumbnails"
  showThumbnailInfo
  thumbnailActions={[
    {
      icon: <EditIcon />,
      label: 'Rename',
      onClick: (slide, index) => rename(index),
    },
    {
      icon: <TrashIcon />,
      label: 'Delete',
      variant: 'danger',
      onClick: (slide, index) => remove(index),
    },
  ]}
  trailingThumbnail={{
    icon: <PlusIcon />,
    label: 'Add image',
    onClick: () => addSlide(),
  }}
/>

import { Carousel } from 'fluxo-ui';
import { TrashIcon } from 'fluxo-ui/icons';

const addFromFiles = (files: File[]) => {
  Promise.all(
    files.map(
      (file) =>
        new Promise<CarouselSlide>((resolve) => {
          const url = URL.createObjectURL(file);
          resolve({ id: crypto.randomUUID(), type: 'image', src: url, name: file.name });
        }),
    ),
  ).then((next) => setSlides((prev) => [...prev, ...next]));
};

// Drag-drop and the trailing file-picker tile are handled by the carousel.
// Forward clipboard paste to the same callback for paste-anywhere support.
useEffect(() => {
  const onPaste = (e: ClipboardEvent) => {
    const files = Array.from(e.clipboardData?.files ?? []).filter((f) => f.type.startsWith('image/'));
    if (files.length) addFromFiles(files);
  };
  window.addEventListener('paste', onPaste);
  return () => window.removeEventListener('paste', onPaste);
}, []);

<Carousel
  slides={slides}
  navigation="thumbnails"
  aspectRatio="16/10"
  onAddImages={addFromFiles}
  thumbnailActions={[{ icon: <TrashIcon />, label: 'Delete', variant: 'danger', onClick: (_s, i) => remove(i) }]}
/>

import { Carousel } from 'fluxo-ui';

<Carousel
  slides={slides}
  autoplay
  autoplayInterval={3000}
  loop
/>