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

image 1
image 2
image 3
image 4
image 5
image 6
image 7

Collections

image 1
Vintage Leather Jacket
Classic brown leather jacket, perfect for a stylish retro look.
image 2
Wireless Bluetooth Headphones
Experience high-quality sound with these comfortable, noise-canceling headphones.
image 3
Organic Cotton T-Shirt
Soft and eco-friendly t-shirt made from 100% organic cotton.
image 4
Stainless Steel Water Bottle
Keep your drinks cold or hot with this durable, insulated water bottle.
image 5
Running Shoes
Lightweight and comfortable shoes designed for optimal performance.
image 6
Smartwatch
Stay connected and track your fitness with this sleek smartwatch.
image 7
Portable Charger
Never run out of battery with this high-capacity portable charger.

Orientation

Vintage Leather Jacket
Classic brown leather jacket, perfect for a stylish retro look.
Wireless Bluetooth Headphones
Experience high-quality sound with these comfortable, noise-canceling headphones.
Organic Cotton T-Shirt
Soft and eco-friendly t-shirt made from 100% organic cotton.
Stainless Steel Water Bottle
Keep your drinks cold or hot with this durable, insulated water bottle.
Running Shoes
Lightweight and comfortable shoes designed for optimal performance.
Smartwatch
Stay connected and track your fitness with this sleek smartwatch.
Portable Charger
Never run out of battery with this high-capacity portable charger.
Noise-Canceling Earbuds
Compact and powerful earbuds that block out unwanted noise.
Yoga Mat
Non-slip, cushioned yoga mat for a comfortable workout experience.
LED Desk Lamp
Bright and energy-efficient LED lamp with adjustable brightness.

Options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
Vintage Leather Jacket
Classic brown leather jacket, perfect for a stylish retro look.
Wireless Bluetooth Headphones
Experience high-quality sound with these comfortable, noise-canceling headphones.
Organic Cotton T-Shirt
Soft and eco-friendly t-shirt made from 100% organic cotton.
Stainless Steel Water Bottle
Keep your drinks cold or hot with this durable, insulated water bottle.
Running Shoes
Lightweight and comfortable shoes designed for optimal performance.
Smartwatch
Stay connected and track your fitness with this sleek smartwatch.
Portable Charger
Never run out of battery with this high-capacity portable charger.
Noise-Canceling Earbuds
Compact and powerful earbuds that block out unwanted noise.
Yoga Mat
Non-slip, cushioned yoga mat for a comfortable workout experience.
LED Desk Lamp
Bright and energy-efficient LED lamp with adjustable brightness.

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.

1
2
3
4
5
6
7
8
9
10