HQ UI

Carousel

The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Installation

In the terminal, run the following command to begin:
npx hq-kit add carousel

Basic

Collections

Orientation

Options

Autoplay

This a plugin by the embla-carousel it self, it's not included in the package, but you can install it to make sure the carousel autoplay. Once you install it, you can use it with the plugins prop.

In the terminal, run the following command to begin:
npm i embla-carousel-autoplay

Link

If you need a link in carousel item, simply add href prop to the Carousel.Item.

<Carousel.Item href="/path/to/page"/>

API

You can use the carousel api to control the carousel.