PHPackages                             codenzia/filament-carousel - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. codenzia/filament-carousel

ActiveLibrary[Utility & Helpers](/categories/utility)

codenzia/filament-carousel
==========================

A Swiper.js-powered carousel component for Filament v4 with responsive grids, effects, autoplay, and dynamic card schemas.

v0.1.0(2mo ago)00MITPHPPHP ^8.3CI failing

Since Feb 28Pushed 2mo agoCompare

[ Source](https://github.com/Codenzia/filament-carousel)[ Packagist](https://packagist.org/packages/codenzia/filament-carousel)[ Docs](https://github.com/codenzia/filament-carousel)[ GitHub Sponsors](https://github.com/codenzia)[ RSS](/packages/codenzia-filament-carousel/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (14)Versions (5)Used By (0)

Filament Carousel
=================

[](#filament-carousel)

A highly flexible, responsive carousel component for [Filament PHP v4](https://filamentphp.com), powered by [Swiper.js](https://swiperjs.com). Supports horizontal and vertical scrolling, responsive grids, card actions, header actions, and extensive UI customization.

Requirements
------------

[](#requirements)

- PHP 8.1+
- Laravel 12+
- Filament v4

Installation
------------

[](#installation)

Install via Composer:

```
composer require codenzia/filament-carousel
```

Optionally, publish the views for customization:

```
php artisan vendor:publish --tag="filament-carousel-views"
```

### Panel Plugin Registration

[](#panel-plugin-registration)

Register the plugin in your Filament panel provider:

```
use Codenzia\FilamentCarousel\FilamentCarouselPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentCarouselPlugin::make(),
        ]);
}
```

Quick Start
-----------

[](#quick-start)

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

```
use Codenzia\FilamentCarousel\Widgets\Carousel;
use Filament\Schemas\Schema;
use Filament\Schemas\Components\TextEntry;
use Filament\Support\Icons\Heroicon;

Carousel::make('projects')
    ->label('Active Projects')
    ->icon(Heroicon::Briefcase)
    ->navigation()
    ->slidesPerView(3)
    ->spaceBetween(20)
    ->cardSchema(fn (Schema $schema, $record) => $schema->components([
        TextEntry::make('name')->label('Project'),
        TextEntry::make('status')->badge(),
    ])),
```

Configuration Reference
-----------------------

[](#configuration-reference)

### Layout

[](#layout)

MethodDefaultDescription`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

[](#responsive-grid)

Enable dynamic slide count calculation based on container width:

```
Carousel::make('items')
    ->responsiveGrid()
    ->minCardWidth(250)      // Minimum card width for calculation
    ->minCardHeight(180),    // Minimum card height
```

MethodDefaultDescription`responsiveGrid(bool)``false`Enable responsive slide count`minCardWidth(string|int)``'200px'`Min card width for calculation`minCardHeight(string|int)``'auto'`Min card heightWhen enabled, `slidesPerView` is calculated as: `floor(containerWidth / (minCardWidth + spaceBetween))`.

### Navigation Arrows

[](#navigation-arrows)

```
Carousel::make('items')
    ->navigation()
    ->arrowPosition('header')
    ->navigationNextIcon('heroicon-o-chevron-right')
    ->navigationPrevIcon('heroicon-o-chevron-left'),
```

MethodDefaultDescription`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

[](#pagination)

```
Carousel::make('items')
    ->pagination()
    ->paginationType('bullets')
    ->paginationClickable()
    ->paginationDynamicBullets(),
```

MethodDefaultDescription`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

[](#scrollbar)

```
Carousel::make('items')
    ->scrollbar()
    ->scrollbarDraggable()
    ->scrollbarHide(false),
```

MethodDefaultDescription`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

[](#autoplay)

```
Carousel::make('items')
    ->autoplay()
    ->autoplayDelay(5000),
```

MethodDefaultDescription`autoplay(bool)``false`Enable autoplay`autoplayDelay(int)``3000`Delay between transitions (ms)Additional autoplay getters: `getAutoplayDisableOnInteraction()`, `getAutoplayPauseOnMouseEnter()`, `getAutoplayReverseDirection()`, `getAutoplayStopOnLastSlide()`, `getAutoplayWaitForTransition()`.

### Effects

[](#effects)

```
Carousel::make('items')
    ->effect('coverflow'),
```

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

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

Card Schema
-----------

[](#card-schema)

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

```
use Filament\Schemas\Schema;
use Filament\Schemas\Components\TextEntry;
use Filament\Schemas\Components\ImageEntry;

Carousel::make('team')
    ->label('Team Members')
    ->cardSchema(fn (Schema $schema, $record) => $schema->components([
        ImageEntry::make('avatar')->circular(),
        TextEntry::make('name')->weight('bold'),
        TextEntry::make('role')->color('gray'),
    ])),
```

### Card View Props

[](#card-view-props)

Pass additional data to custom card views:

```
Carousel::make('items')
    ->cardViewProps(['showAvatar' => true, 'size' => 'lg']),
```

Actions
-------

[](#actions)

### Header Actions

[](#header-actions)

Display Filament Actions in the carousel header area:

```
use Filament\Actions\Action;

Carousel::make('projects')
    ->label('Projects')
    ->navigation()
    ->headerActions([
        Action::make('create')
            ->label('New Project')
            ->icon('heroicon-o-plus')
            ->action(fn () => redirect()->route('projects.create')),
    ])
    ->showHeaderActionsOnHover(),  // Only visible on hover
```

MethodDefaultDescription`headerActions(array|Closure)``[]`Array of `Action` or `ActionGroup` instances`showHeaderActionsOnHover(bool)``false`Reveal actions only on hover### Card Actions

[](#card-actions)

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

```
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;

Carousel::make('milestones')
    ->cardActions([
        ActionGroup::make([
            Action::make('edit')
                ->label('Edit')
                ->icon('heroicon-o-pencil')
                ->action(fn ($record) => /* edit logic */),
            Action::make('delete')
                ->label('Delete')
                ->icon('heroicon-o-trash')
                ->color('danger')
                ->requiresConfirmation()
                ->action(fn ($record) => $record->delete()),
        ]),
    ])
    ->cardActionsPosition('top-right')
    ->showCardActionsOnHover(),
```

MethodDefaultDescription`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 hoverWhen position is `null`, it auto-detects: `'top-right'` for horizontal carousels, `'right-edge'` for vertical.

### Item Click Action

[](#item-click-action)

Make the entire card clickable to trigger a Livewire action:

```
Carousel::make('tasks')
    ->itemClickAction('editTask'),
```

The clicked record is automatically passed as the action argument.

### Title Click Action

[](#title-click-action)

Make the carousel heading clickable:

```
Carousel::make('tasks')
    ->label('My Tasks')
    ->titleAction('viewAllTasks'),
```

Extra Attributes
----------------

[](#extra-attributes)

Add custom HTML attributes to the carousel container:

```
Carousel::make('items')
    ->extraAttributes(['class' => 'my-custom-class', 'data-section' => 'featured'])
    ->addClass('another-class')
    ->addClasses(['class-a', 'class-b']),
```

Advanced Swiper Options
-----------------------

[](#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

[](#touch--interaction)

GetterDefaultDescription`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

[](#keyboard--mousewheel)

GetterDefault`getKeyboardEnabled()``false``getKeyboardOnlyInViewport()``true``getMousewheelEnabled()``false``getMousewheelForceToAxis()``false``getMousewheelSensitivity()``1`### Zoom

[](#zoom)

GetterDefault`getZoomEnabled()``false``getZoomMaxRatio()``3``getZoomMinRatio()``1``getZoomToggle()``true`### Free Mode

[](#free-mode)

GetterDefault`getFreeModeEnabled()``false``getFreeModeMomentum()``true``getFreeModeMomentumBounce()``true``getFreeModeSticky()``false`### Virtual Slides

[](#virtual-slides)

GetterDefault`getVirtualEnabled()``false``getVirtualCache()``true``getVirtualAddSlidesBefore()``0``getVirtualAddSlidesAfter()``0`### Loop

[](#loop)

GetterDefault`getLoop()``false``getLoopAddBlankSlides()``true``getLoopAdditionalSlides()``0``getLoopPreventsSliding()``true``getRewind()``false`Full Example
------------

[](#full-example)

```
use Codenzia\FilamentCarousel\Widgets\Carousel;
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;
use Filament\Schemas\Schema;
use Filament\Schemas\Components\TextEntry;
use Filament\Support\Icons\Heroicon;

Carousel::make('milestones')
    ->label('Milestones')
    ->icon(Heroicon::Flag)
    ->navigation()
    ->arrowPosition('header')
    ->slidesPerView(3)
    ->spaceBetween(16)
    ->responsiveGrid()
    ->minCardWidth(300)
    ->autoplay()
    ->autoplayDelay(5000)
    ->headerActions([
        Action::make('create')
            ->label('Add Milestone')
            ->icon('heroicon-o-plus'),
    ])
    ->showHeaderActionsOnHover()
    ->cardActions([
        ActionGroup::make([
            Action::make('edit')
                ->label('Edit')
                ->icon('heroicon-o-pencil'),
            Action::make('delete')
                ->label('Delete')
                ->icon('heroicon-o-trash')
                ->color('danger')
                ->requiresConfirmation(),
        ]),
    ])
    ->cardActionsPosition('top-right')
    ->showCardActionsOnHover()
    ->itemClickAction('viewMilestone')
    ->titleAction('viewAllMilestones')
    ->cardSchema(fn (Schema $schema, $record) => $schema->components([
        TextEntry::make('title')->weight('bold'),
        TextEntry::make('due_date')->date(),
        TextEntry::make('priority')->badge(),
    ])),
```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Codenzia](https://github.com/Codenzia)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance85

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 64.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~25 days

Total

4

Last Release

79d ago

PHP version history (2 changes)v1.0.0PHP ^8.1

v0.1.0PHP ^8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/7c09a47187ca823dff0650b985b6b1d0632bf550fffbd692005cb12ffae5e8ac?d=identicon)[mh2x](/maintainers/mh2x)

---

Top Contributors

[![sehsah](https://avatars.githubusercontent.com/u/8730764?v=4)](https://github.com/sehsah "sehsah (22 commits)")[![mh2x](https://avatars.githubusercontent.com/u/10361843?v=4)](https://github.com/mh2x "mh2x (12 commits)")

---

Tags

laravelcodenziafilament-carousel

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/codenzia-filament-carousel/health.svg)

```
[![Health](https://phpackages.com/badges/codenzia-filament-carousel/health.svg)](https://phpackages.com/packages/codenzia-filament-carousel)
```

###  Alternatives

[guava/calendar

Adds support for vkurko/calendar to Filament PHP.

298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice

Customize the livewire expiration notice

9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle

Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts.

6292.3k1](/packages/hydrat-filament-table-layout-toggle)[outerweb/filament-settings

Filament integration for the outerweb/settings package

3690.9k4](/packages/outerweb-filament-settings)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)