Carousel

npm install @yoopta/carousel

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Carousel from '@yoopta/carousel';

const plugins = [Carousel];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
  return <YooptaEditor editor={editor} onChange={() => {}} />;
}

carousel-container
└── carousel-list
    └── carousel-list-item (multiple, props: order)
        ├── carousel-list-item-heading
        └── carousel-list-item-content

import Carousel from '@yoopta/carousel';

const plugins = [Carousel];

import Carousel, { CarouselCommands } from '@yoopta/carousel';

CarouselCommands.insertCarousel(editor, {
  items: 3,
  at: 0,
  focus: true,
});

import { CarouselCommands } from '@yoopta/carousel';

const carouselElement = CarouselCommands.buildCarouselElements(editor, {
  items: 3,
});

import { CarouselCommands } from '@yoopta/carousel';

CarouselCommands.deleteCarousel(editor, blockId);

import { Blocks } from '@yoopta/editor';

// Delete
Blocks.deleteBlock(editor, { blockId });

// Update block meta
Blocks.updateBlock(editor, { blockId, meta: { align: 'center' } });

import { Elements } from '@yoopta/editor';

// Insert new carousel item
Elements.insertElement(editor, {
  blockId,
  type: 'carousel-list-item',
  props: { order: 3 },
  at: 'next',
  focus: true,
});

// Update item order
Elements.updateElement(editor, {
  blockId,
  type: 'carousel-list-item',
  props: { order: 2 },
  path: itemPath,
});

// Delete carousel item
Elements.deleteElement(editor, {
  blockId,
  type: 'carousel-list-item',
  path: itemPath,
});

// Each carousel item can contain images in the content area
CarouselCommands.insertCarousel(editor, {
  items: 5, // 5 slides for gallery
  at: 0,
});

// Then add images to each carousel-list-item-content

// Use carousel for rotating testimonials
CarouselCommands.insertCarousel(editor, {
  items: 3,
  at: 0,
});

// Heading: Customer name
// Content: Testimonial text

// Showcase multiple products in a carousel
CarouselCommands.insertCarousel(editor, {
  items: 4,
  at: 0,
});

// Heading: Product name
// Content: Product description and images

/* Example custom styles */
.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-list {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-list-item {
  min-width: 100%;
  padding: 20px;
}