Carousel

Carousel Component

The Carousel component displays a slideshow of images with optional titles and descriptions. It supports navigation controls (previous/next buttons), slide indicators, and can show text overlays on the slides.

Example Usage

<x-carousel
    :slides="[
        [
            'imgSrc' => 'https://example.com/slide1.webp',
            'imgAlt' => 'Slide 1',
            'title' => 'First Slide',
            'description' => 'Description for the first slide.',
        ],
        [
            'imgSrc' => 'https://example.com/slide2.webp',
            'imgAlt' => 'Slide 2',
            'title' => 'Second Slide',
            'description' => 'Description for the second slide.',
        ],
    ]"
    :indicator="true"
    :previousButton="true"
    :nextButton="true"
    :withText="true"
    class="w-full h-96"
/>

Props

• slides (array)
  An array of slide objects, each containing imgSrc (image URL), imgAlt (alt text), and optional title and description for text overlays.

• indicator (bool, default: true)
  Enables or disables the slide indicator dots below the carousel.

• previousButton (bool, default: true)
  Shows or hides the previous slide navigation button.

• nextButton (bool, default: true)
  Shows or hides the next slide navigation button.

• withText (bool, default: false)
  Toggles display of slide titles and descriptions as an overlay on the images.

• previousButtonIcon (string, default: 'icon-chevron-left')
  CSS class for the icon used in the previous button.

• nextButtonIcon (string, default: 'icon-chevron-right')
  CSS class for the icon used in the next button.

Overview

This Carousel component provides a responsive slideshow with image slides that can optionally display text overlays. It supports user navigation via previous/next buttons and clickable slide indicators. The component is powered by Alpine.js for interactivity and styled with Tailwind CSS, making it easily customizable and accessible.