Carousel

A responsive image/content carousel component for Laravel applications. Supports auto-play, navigation, and indicators. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/carousel

Livewire Usage

Basic Usage

<livewire:sb-carousel :slides="[
    ['image' => '/images/slide1.jpg', 'title' => 'Slide 1'],
    ['image' => '/images/slide2.jpg', 'title' => 'Slide 2'],
    ['image' => '/images/slide3.jpg', 'title' => 'Slide 3']
]" />

Auto-play

<livewire:sb-carousel :slides="$slides" :autoplay="true" :interval="5000" />

With Navigation

<livewire:sb-carousel
    :slides="$slides"
    :show-arrows="true"
    :show-indicators="true"
/>

Livewire Props

Vue 3 Usage

Setup

import { SbCarousel } from './vendor/sb-carousel';
app.component('SbCarousel', SbCarousel);

Basic Usage

<template>
  <SbCarousel :slides="slides" />
</template>

<script setup>
const slides = [
  { image: '/images/slide1.jpg', title: 'First Slide' },
  { image: '/images/slide2.jpg', title: 'Second Slide' },
  { image: '/images/slide3.jpg', title: 'Third Slide' }
];
</script>

With Auto-play

<template>
  <SbCarousel
    :slides="slides"
    autoplay
    :interval="4000"
  />
</template>

Custom Slides via Slot

<template>
  <SbCarousel :slide-count="products.length">
    <template #slide="{ index }">
      <div class="p-8 text-center">
        <img :src="https://raw.githubusercontent.com/mrshanebarron/carousel/HEAD/products[index].image" class="mx-auto" />
        <h3 class="text-xl font-bold mt-4">{{ products[index].name }}</h3>
        <p class="text-gray-600">{{ products[index].price }}</p>
      </div>
    </template>
  </SbCarousel>
</template>

Hero Carousel

<template>
  <SbCarousel :slides="heroSlides" class="h-96" autoplay>
    <template #slide="{ slide }">
      <div
        class="h-full bg-cover bg-center flex items-center justify-center"
        :style="{ backgroundImage: `url(${slide.image})` }"
      >
        <div class="text-center text-white">
          <h2 class="text-4xl font-bold">{{ slide.title }}</h2>
          <p class="mt-2">{{ slide.description }}</p>
        </div>
      </div>
    </template>
  </SbCarousel>
</template>

Vue Props

Events

Slots

Slide Object

{
  image: '/path/to/image.jpg',  // Image URL
  title: 'Slide Title',          // Optional title
  description: 'Description',    // Optional description
  link: '/page'                  // Optional link
}

Features

• Auto-play: Automatic slide advancement
• Navigation: Previous/next arrows
• Indicators: Clickable dot navigation
• Touch Support: Swipe on mobile
• Keyboard: Arrow key navigation
• Responsive: Full-width responsive

Styling

Uses Tailwind CSS:

• Full-width container
• Centered arrows
• Bottom indicators
• Smooth transitions

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License