What's new in v0.1.0

v0.1.0 May 20, 2026

First tracked release. Early beta. Earlier history not recorded — see git log for changes prior to release-tracker adoption.

Filament Carousel — Documentation

Filament Carousel Filament Comments Filament Gantt Filament Gantt Lite Filament Media Panel Base Browser Console System Tools Project Essentials Filament Diagrammer Filament Workflow Filament DAM Laravel Feedback Filament Reviews Release Tracker

Filament Carousel

A highly flexible, responsive carousel component for Filament PHP v4, powered by Swiper.js. Supports horizontal and vertical scrolling, responsive grids, card actions, header actions, and extensive UI customization.

Requirements

PHP 8.1+
Laravel 12+
Filament v4

Installation

Install via Composer:

Optionally, publish the views for customization:

Panel Plugin Registration

Quick Start

The Carousel component is a Filament Infolist Entry. Use it inside any Infolist schema:

Configuration Reference

Layout

Method	Default	Description
`slidesPerView(int)`	`4`	Number of visible slides
`slidesPerGroup(int)`	`1`	Slides to advance per swipe
`spaceBetween(int)`	`20`	Gap between slides in pixels
`gridRows(int)`	`1`	Number of rows in grid layout
`direction(string)`	`'horizontal'`	`'horizontal'` or `'vertical'`
`height(string)`	`'auto'`	Container height (e.g. `'400px'`)
`width(string\|int)`	`'auto'`	Container width; integers auto-append `px`
`centeredSlides(bool)`	`false`	Center the active slide

Responsive Grid

Enable dynamic slide count calculation based on container width:

Method	Default	Description
`responsiveGrid(bool)`	`false`	Enable responsive slide count
`minCardWidth(string\|int)`	`'200px'`	Min card width for calculation
`minCardHeight(string\|int)`	`'auto'`	Min card height

When enabled, slidesPerView is calculated as: floor(containerWidth / (minCardWidth + spaceBetween)).

Navigation Arrows

Method	Default	Description
`navigation(bool)`	`false`	Enable navigation arrows
`arrowPosition(string)`	`'header'`	`'header'`, `'items'`, or `'pagination'`
`navigationNextIcon(string\|Closure)`	`null`	Custom next arrow icon
`navigationPrevIcon(string\|Closure)`	`null`	Custom prev arrow icon

Pagination

Method	Default	Description
`pagination(bool)`	`false`	Enable pagination
`paginationType(string)`	`'bullets'`	`'bullets'`, `'fraction'`, or `'progressbar'`
`paginationClickable(bool)`	`false`	Allow clicking pagination bullets
`paginationDynamicBullets(bool)`	`false`	Dynamic bullet sizing
`paginationDynamicMainBullets(int)`	`1`	Number of main dynamic bullets
`paginationHideOnClick(bool)`	`false`	Hide pagination on click

Scrollbar

Method	Default	Description
`scrollbar(bool)`	`false`	Enable scrollbar
`scrollbarDragSize(int)`	`50`	Drag handle size
`scrollbarDraggable(bool)`	`false`	Allow dragging the scrollbar
`scrollbarSnapOnRelease(bool)`	`false`	Snap to slides on release
`scrollbarHide(bool)`	`true`	Auto-hide scrollbar

Autoplay

Method	Default	Description
`autoplay(bool)`	`false`	Enable autoplay
`autoplayDelay(int)`	`3000`	Delay between transitions (ms)

Additional autoplay getters: getAutoplayDisableOnInteraction(), getAutoplayPauseOnMouseEnter(), getAutoplayReverseDirection(), getAutoplayStopOnLastSlide(), getAutoplayWaitForTransition().

Effects

Supported effects: 'slide' (default), 'fade', 'cube', 'coverflow', 'flip', 'cards'.

Each effect has dedicated configuration getters (e.g. getCoverflowEffectDepth(), getCubeEffectShadow(), getCardsEffectPerSlideOffset()).

Card Schema

Define the content of each card using Filament's Schema builder. The closure receives a Schema instance and the current $record:

Card View Props

Pass additional data to custom card views:

Actions

Header Actions

Display Filament Actions in the carousel header area:

Method	Default	Description
`headerActions(array\|Closure)`	`[]`	Array of `Action` or `ActionGroup` instances
`showHeaderActionsOnHover(bool)`	`false`	Reveal actions only on hover

Card Actions

Display per-card actions (bound to each record automatically):

Method	Default	Description
`cardActions(array\|Closure)`	`[]`	Array of `Action` or `ActionGroup` instances
`cardActionsPosition(string)`	`null` (auto)	`'top-right'`, `'top-left'`, `'bottom-right'`, `'right-edge'`
`showCardActionsOnHover(bool)`	`false`	Reveal actions only on hover

When position is null, it auto-detects: 'top-right' for horizontal carousels, 'right-edge' for vertical.

Item Click Action

Make the entire card clickable to trigger a Livewire action:

The clicked record is automatically passed as the action argument.

Title Click Action

Make the carousel heading clickable:

Extra Attributes

Add custom HTML attributes to the carousel container:

Advanced Swiper Options

The carousel exposes the full Swiper.js API through fluent getters. These are pre-configured with sensible defaults but can be accessed or overridden:

Touch & Interaction

Getter	Default	Description
`getAllowTouchMove()`	`true`	Enable touch dragging
`getAllowSlideNext()`	`true`	Allow swiping forward
`getAllowSlidePrev()`	`true`	Allow swiping backward
`getGrabCursor()`	`false`	Show grab cursor
`getSimulateTouch()`	`true`	Simulate touch on desktop
`getThreshold()`	`5`	Min swipe distance (px)
`getTouchAngle()`	`45`	Allowed touch angle
`getSpeed()`	`300`	Transition speed (ms)

Keyboard & Mousewheel

Getter	Default
`getKeyboardEnabled()`	`false`
`getKeyboardOnlyInViewport()`	`true`
`getMousewheelEnabled()`	`false`
`getMousewheelForceToAxis()`	`false`
`getMousewheelSensitivity()`	`1`

Zoom

Getter	Default
`getZoomEnabled()`	`false`
`getZoomMaxRatio()`	`3`
`getZoomMinRatio()`	`1`
`getZoomToggle()`	`true`

Free Mode

Getter	Default
`getFreeModeEnabled()`	`false`
`getFreeModeMomentum()`	`true`
`getFreeModeMomentumBounce()`	`true`
`getFreeModeSticky()`	`false`

Virtual Slides

Getter	Default
`getVirtualEnabled()`	`false`
`getVirtualCache()`	`true`
`getVirtualAddSlidesBefore()`	`0`
`getVirtualAddSlidesAfter()`	`0`

Loop

Getter	Default
`getLoop()`	`false`
`getLoopAddBlankSlides()`	`true`
`getLoopAdditionalSlides()`	`0`
`getLoopPreventsSliding()`	`true`
`getRewind()`	`false`