PHPackages tuto1902/infolist-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. tuto1902/infolist-carousel ActiveLibrary[Utility & Helpers](/categories/utility) tuto1902/infolist-carousel ========================== Infolist Carousel Entry for Filament v3 v1.0.2(1y ago)012[4 PRs](https://github.com/tuto1902/infolist-carousel/pulls)MITPHPPHP ^8.2CI passing Since Jun 20Pushed 1mo ago1 watchersCompare [ Source](https://github.com/tuto1902/infolist-carousel)[ Packagist](https://packagist.org/packages/tuto1902/infolist-carousel)[ Docs](https://github.com/tuto1902/infolist-carousel)[ GitHub Sponsors]()[ RSS](/packages/tuto1902-infolist-carousel/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (10)Versions (16)Used By (0) Infolist Carousel Entry for Filament v3 ======================================= [](#infolist-carousel-entry-for-filament-v3) [![Latest Version on Packagist](https://camo.githubusercontent.com/09862c837a4b4fa97dee50b2c866ccf173a6c49bee6c9587a20ba082c5cfa52d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7475746f313930322f696e666f6c6973742d6361726f7573656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tuto1902/infolist-carousel)[![Total Downloads](https://camo.githubusercontent.com/84d189a196d20dd48cd86c23aa13018be3305d09c1ba46a7bd986ee798cda0b9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7475746f313930322f696e666f6c6973742d6361726f7573656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tuto1902/infolist-carousel) Infolist Carousel entry that allows you to add a slide carousel to any of you Filament v3 projects. Screenshots ----------- [](#screenshots) [![infolist-carousel](https://private-user-images.githubusercontent.com/2152532/347656851-e742f4bf-02b3-4a0d-a3ea-e3afa678d303.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyMDM3MjEsIm5iZiI6MTc3NTIwMzQyMSwicGF0aCI6Ii8yMTUyNTMyLzM0NzY1Njg1MS1lNzQyZjRiZi0wMmIzLTRhMGQtYTNlYS1lM2FmYTY3OGQzMDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDgwMzQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGMxZGI3NzJkYzczNTRhZTFjOWI0MWZkZmI2MTY3NWI5ZWVlNzI1YjVmZDZkOTBiYzM4MmNhMTIxZTM0ZDI1NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.1g2n_WRk44dH8AfC8PeeOMvJ7UBFFoty16u1535LBok)](https://private-user-images.githubusercontent.com/2152532/347656851-e742f4bf-02b3-4a0d-a3ea-e3afa678d303.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyMDM3MjEsIm5iZiI6MTc3NTIwMzQyMSwicGF0aCI6Ii8yMTUyNTMyLzM0NzY1Njg1MS1lNzQyZjRiZi0wMmIzLTRhMGQtYTNlYS1lM2FmYTY3OGQzMDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDgwMzQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGMxZGI3NzJkYzczNTRhZTFjOWI0MWZkZmI2MTY3NWI5ZWVlNzI1YjVmZDZkOTBiYzM4MmNhMTIxZTM0ZDI1NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.1g2n_WRk44dH8AfC8PeeOMvJ7UBFFoty16u1535LBok) Installation ------------ [](#installation) You can install the package via composer: ``` composer require tuto1902/infolist-carousel ``` Add the following lines in the content section of your `tailwind.config.js` file ``` export default { presets: [preset], content: [ + './vendor/tuto1902/carousel/resources/**/*.blade.php', + './vendor/tuto1902/infolist-carousel/resources/**/*.blade.php', ], theme: { extend: {}, }, plugins: [], } ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="infolist-carousel-views" ``` You can also publish the carousel blade components using ``` php artisan vendor:publish --tag="carousel-views" ``` Usage ----- [](#usage) Simply import the Carousel component and include it in your Infolist schema. The following is an example using a panel builder resource ``` use Tuto1902\InfolistCarousel\Infolists\Components\Carousel; use Filament\Infolists\Infolist; public static function infolist(Infolist $infolist): Infolist { return $infolist ->schema([ Carousel::make('slides.file_name') ]); } ``` By default, the slides will display the column value (or the primary key of your model). You can provide your own slide view using: ``` public static function infolist(Infolist $infolist): Infolist { return $infolist ->schema([ Carousel::make('slides.file_name') ->slideView('my-slide-template') ]); } ``` The view sould be created inside your project's `resources/views` folder. Here's an example of a simple square slide with an image background. ``` ``` In this scenario, the `$state` variable points to the value of the `slides.file_name` column. If a column value is not provided, the `$state` variable will be Model instance. For example, imagine that you have a `Carousel` model (and it's corresponding Resource with an infolist page). Inside this model, you have a `HasMany` relationship with the `Slide` model. Therefore, you can get a list of all carousel slides using the `->slides` property of the `Carousel` model class. If you only provide the relationship name to the `Carousle::make` method, the `$state` variable will be a `Slide` model instance. This way, you have access to all the information from `Slide` model inside your slide template. ``` public static function infolist(Infolist $infolist): Infolist { return $infolist ->schema([ Carousel::make('slides') ->slideView('my-slide-template') ]); } ``` ``` ``` Customization ------------- [](#customization) You can customize the look and feel of your carousel usign the following options. ### Loop [](#loop) The carousel will loop back to the start/end of your slides. ``` Carousel::make('slides.file_name') ->loop() ``` ### Orientation [](#orientation) Change the orientation of the carousel. You can choose between Verical and Horizontal (default) ``` use Tuto1902\InfolistCarousel\Infolists\Components\Carousel\CarouselOrientation; Carousel::make('slides.file_name') ->orientation(CarouselOrientation::Vertical) ``` ### Size [](#size) Change the size of the carousel frame. You can choose between Small, Medium and Large. Additionally, you can provide any valid TailwindCSS `size-*` class as a string ``` use Tuto1902\InfolistCarousel\Infolists\Components\Carousel\CarouselSize; Carousel::make('slides.file_name') ->size(CarouselSize::Large) // or ->size('size-96') ``` Important In order to provide TailwindCSS classes to the `size` function, you'll need to add the following line inside the content section of your `tailwind.config.js` file. ``` export default { presets: [preset], content: [ './vendor/tuto1902/carousel/resources/**/*.blade.php', './vendor/tuto1902/infolist-carousel/resources/**/*.blade.php', + './vendor/tuto1902/infolist-carousel/src/Infolists/Components/**/*.php', ], theme: { extend: {}, }, plugins: [], } ``` ### Autoplay & Delay [](#autoplay--delay) Slides will navigate automatically using the specified delay (in miliseconds). If no delay is provided, the default will be 4000 (4 seconds) ``` Carousel::make('slides.file_name') ->autoplay() ->delay(2000) ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Credits ------- [](#credits) - [Arturo Rojas](https://github.com/tuto1902) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 38 — LowBetter than 85% of packages Maintenance66 Regular maintenance activity Popularity5 Limited adoption so far Community10 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 65.2% 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 ~3 days Total 3 Last Release 661d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/412fa76fb1b62e1ded633e44bc7a9f93704bc1cb985710158b2e653d796b8c1b?d=identicon)[tuto1902](/maintainers/tuto1902) --- Top Contributors [![tuto1902](https://avatars.githubusercontent.com/u/2152532?v=4)](https://github.com/tuto1902 "tuto1902 (15 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (4 commits)") --- Tags laravelArturo Rojasinfolist-carousel ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/tuto1902-infolist-carousel/health.svg) ``` [![Health](https://phpackages.com/badges/tuto1902-infolist-carousel/health.svg)](https://phpackages.com/packages/tuto1902-infolist-carousel) ``` ### Alternatives [spatie/laravel-data Create unified resources and data transfer objects 1.7k28.9M626](/packages/spatie-laravel-data)[hirethunk/verbs An event sourcing package that feels nice. 513162.9k6](/packages/hirethunk-verbs)[worksome/exchange Check Exchange Rates for any currency in Laravel. 123544.7k](/packages/worksome-exchange)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls)[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)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1124.1k](/packages/codebar-ag-laravel-filament-json-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)