Carousel Examples

AppCarousel Component

A responsive carousel component based on Nuxt UI Carousel with support for images, titles, descriptions, and action buttons.

Basic Carousel

Simple image carousel without overlay content

View Code

const items = [
  {
    image: 'https://images.unsplash.com/.../photo.jpg',
    imageAlt: 'Mountain landscape'
  },
  // ... more items
]

<AppCarousel :items="items" />

Carousel with Content

Carousel with titles and descriptions

Explore the Mountains

Discover breathtaking views and unforgettable adventures in the great outdoors.

Beach Paradise

Relax on pristine beaches with crystal-clear waters and golden sand.

Forest Retreat

Immerse yourself in nature and find peace among the trees.

View Code

const items = [
  {
    image: 'https://images.unsplash.com/.../photo.jpg',
    title: 'Explore the Mountains',
    description: 'Discover breathtaking views...',
    imageAlt: 'Mountain peak'
  },
  // ... more items
]

<AppCarousel :items="items" />

Carousel with Actions

Carousel with action buttons (supports all UButton props)

New Collection

Check out our latest products and exclusive offers.

Shop Now Learn More

Limited Time Offer

Save up to 50% on selected items. Hurry, offer ends soon!

View Deals

Join Our Community

Connect with thousands of users and get exclusive updates.

View Code

const items = [
  {
    image: 'https://images.unsplash.com/.../photo.jpg',
    title: 'New Collection',
    description: 'Check out our latest products...',
    actions: [
      {
        label: 'Shop Now',
        color: 'primary',
        size: 'lg',
        to: '#'
      },
      {
        label: 'Learn More',
        color: 'neutral',
        variant: 'outline',
        size: 'lg',
        to: '#'
      }
    ]
  },
  // ... more items
]

<AppCarousel :items="items" />

Autoplay Carousel

Automatically transitions every 3 seconds

Slide 1

This carousel autoplays every 3 seconds

Slide 2

Hover to pause the autoplay

Slide 3

Click arrows to navigate manually

View Code

<AppCarousel
  :items="items"
  :autoplay="true"
  :interval="3000"
/>

Custom Options

Carousel without arrows and indicators

Explore the Mountains

Discover breathtaking views and unforgettable adventures in the great outdoors.

Beach Paradise

Relax on pristine beaches with crystal-clear waters and golden sand.

Forest Retreat

Immerse yourself in nature and find peace among the trees.

View Code

<AppCarousel
  :items="items"
  :arrows="false"
  :indicators="false"
/>

API Reference

Props

Prop	Type	Default	Description
items	CarouselItem[]	required	Array of carousel items
orientation	string	'horizontal'	Carousel orientation
arrows	boolean	true	Show navigation arrows
indicators	boolean	true	Show slide indicators
autoplay	boolean	false	Enable autoplay
interval	number	5000	Autoplay interval (ms)
class	string	-	Additional CSS classes
ui	object	-	UI customization object

CarouselItem Interface

Property	Type	Required	Description
image	string	Yes	Image URL
title	string	No	Slide title
description	string	No	Slide description
actions	ButtonProps[]	No	Array of action buttons
imageAlt	string	No	Image alt text for accessibility

Features

Fully responsive design (mobile-first)
Support for all Nuxt UI Carousel props
Customizable action buttons (supports all UButton props)
Optional title and description with gradient overlay
Autoplay functionality with configurable interval
Keyboard navigation support (inherited from Nuxt UI)
Touch/swipe gestures on mobile
Accessibility features (alt text, ARIA labels)