Day 14 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 14

Press ESC to exit

Source

Day 14

Carousel & Pill Tabs

Image carousel with transitions and scrollable pill navigation

Image Carousel

Smooth image slider with navigation arrows, dots indicator, and optional autoplay.

Features

Smooth CSS transitions
Arrow navigation (hover)
Dots indicator
Autoplay with interval
Image captions
Aspect ratio options

Default Carousel

Beautiful mountain landscape at sunset

Serene nature view with lake

Misty forest path in autumn

Lush green valley panorama

/ 4

With Autoplay (3s)

Beautiful mountain landscape at sunset

Serene nature view with lake

Misty forest path in autumn

Lush green valley panorama

/ 4

Aspect Ratios

Square (1:1)

Beautiful mountain landscape at sunset

Serene nature view with lake

/ 2

Portrait (4:3)

Beautiful mountain landscape at sunset

Serene nature view with lake

/ 2

Pill Navigation

Compact pill-style tabs with horizontal scrolling support for mobile devices.

Features

Horizontal scroll on mobile
Icon support per tab
Badge indicators
Livewire binding
Disabled state support

Scrollable Tabs (Livewire)

Active: all

Simple Tabs (no icons)

With Tab Content

Tab content area. Content changes based on selected tab.

Sizes

Small

Medium

Large

With Disabled Tab

Usage Examples

Carousel Usage

{{-- Basic Carousel --}}
<x-ui.carousel :images="[
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
]" />
 
{{-- With Captions --}}
<x-ui.carousel :images="[
    [
        'src' => 'https://example.com/image1.jpg',
        'alt' => 'Mountain view',
        'caption' => 'Scenic mountain landscape'
    ],
    [
        'src' => 'https://example.com/image2.jpg',
        'alt' => 'Ocean sunset',
        'caption' => 'Beautiful ocean sunset'
    ],
]" />
 
{{-- With Autoplay --}}
<x-ui.carousel
    :images="$images"
    :autoplay="true"
    :interval="3000"
/>
 
{{-- Custom Aspect Ratio --}}
<x-ui.carousel
    :images="$images"
    aspectRatio="1/1"
/>
{{-- Options: 16/9, 4/3, 1/1, auto --}}
 
{{-- Without Navigation --}}
<x-ui.carousel
    :images="$images"
    :showArrows="false"
    :showDots="false"
/>

Pill Tabs Usage

{{-- Simple Tabs --}}
<x-ui.pill-tabs :tabs="[
    'overview' => 'Overview',
    'analytics' => 'Analytics',
    'reports' => 'Reports',
]" />
 
{{-- With Icons and Badges --}}
<x-ui.pill-tabs :tabs="[
    'inbox' => [
        'label' => 'Inbox',
        'icon' => 'inbox',
        'badge' => 12
    ],
    'sent' => [
        'label' => 'Sent',
        'icon' => 'send'
    ],
    'drafts' => [
        'label' => 'Drafts',
        'icon' => 'file-text',
        'badge' => 3
    ],
]" />
 
{{-- With Livewire Binding --}}
<x-ui.pill-tabs
    wire:model.live="activeTab"
    :tabs="$tabs"
/>
 
{{-- Size Variants --}}
<x-ui.pill-tabs size="sm" :tabs="$tabs" />
<x-ui.pill-tabs size="md" :tabs="$tabs" />
<x-ui.pill-tabs size="lg" :tabs="$tabs" />
 
{{-- With Disabled Tab --}}
<x-ui.pill-tabs :tabs="[
    'active' => ['label' => 'Active', 'icon' => 'check'],
    'locked' => ['label' => 'Locked', 'icon' => 'lock', 'disabled' => true],
]" />
 
{{-- With Content Slot --}}
<x-ui.pill-tabs :tabs="$tabs" activeTab="profile">
    <div class="p-4 border rounded-lg">
        Tab content area
    </div>
</x-ui.pill-tabs>