carousel-usage

Name: carousel-usage
Availability: InStock
Author: Techsio

Implement slide-based navigation in Zag.js apps with a reusable Carousel component.

2|Updated Dec 2, 2024

Search Tags:#react #slides #ui-kit #carousel #component-usage #zagjs

Ready to run

npx skills add https://github.com/TechsioCZ/new-engine --skill carousel-usage

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: carousel-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/carousel-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill carousel-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Carousel usage enables developers to implement slide-based navigation in Zag.js-backed apps using the @techsio/ui-kit Carousel, providing a consistent user experience with built-in controls, indicators, and responsive sizing.

Core Features & Use Cases

Unified Carousel component that handles slides, previous/next controls, indicators, and optional autoplay.
Supports customizable props such as slideCount, size, aspectRatio, objectFit, controlPosition, orientation, loop, autoplay, slidesPerPage, and slidesPerMove.
Encourages best practices like using Gallery for thumbnails when applicable and separating slides data from rendering logic.
Provides example patterns and validation commands to ensure proper usage across React-based UIs.

Quick Start

Import the Carousel from @techsio/ui-kit/molecules/carousel and render it with your slides data to enable slide-based navigation.

Frequently Asked Questions about carousel-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a carousel to my React app using Zag.js?▼

To add a carousel in a Zag.js React app, import the reusable Carousel component from your UI kit and render it with your slides data. It provides built-in slide navigation controls, indicators, and responsive sizing for a consistent user experience.

What slide customization options are available for a Zag.js carousel component?▼

A Zag.js carousel component supports customizable props including slideCount, size, aspectRatio, objectFit, controlPosition, orientation, loop, autoplay, slidesPerPage, and slidesPerMove. These props allow you to control layout, behavior, and visual presentation.

Can I enable autoplay and thumbnail navigation in a React carousel?▼

Yes, you can enable autoplay and thumbnail navigation in a React carousel. The component supports an optional autoplay feature, and best practices recommend using a Gallery component to handle thumbnail rendering alongside the main slides.

What is the best way to structure slide data for a React UI kit carousel?▼

The best way to structure slide data for a React UI kit carousel is to separate your slides data from the rendering logic. This pattern ensures clean component architecture and makes it easier to maintain and update the carousel content.

Does the Zag.js carousel support responsive sizing and aspect ratios?▼

Yes, the Zag.js carousel supports responsive sizing through customizable size and aspectRatio props. You can also use the objectFit prop to control how your slide content scales and fits within the defined dimensions.