PHPackages                             tuto1902/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/carousel

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

tuto1902/carousel
=================

Embla carousel wrapper for Laravel

v1.0.3(1y ago)1453[3 PRs](https://github.com/tuto1902/carousel/pulls)1MITBladePHP ^8.2CI passing

Since Jun 4Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/tuto1902/carousel)[ Packagist](https://packagist.org/packages/tuto1902/carousel)[ Docs](https://github.com/tuto1902/carousel)[ GitHub Sponsors](https://github.com/Tuto1902)[ RSS](/packages/tuto1902-carousel/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (4)Dependencies (8)Versions (18)Used By (1)

Embla carousel wrapper for Laravel
==================================

[](#embla-carousel-wrapper-for-laravel)

[![Latest Version on Packagist](https://camo.githubusercontent.com/5e2a3c9585e9bd26889afb9e06f428c2b13442cb9be1a68f4c71669f20e85265/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7475746f313930322f6361726f7573656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tuto1902/carousel)[![Total Downloads](https://camo.githubusercontent.com/a1e38bf10436bf74dd7f4fa3cd505d55a89bf04f50c94e1b1d11f4a2ae6e67d7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7475746f313930322f6361726f7573656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tuto1902/carousel)

This pacakge provides a blade component wrapper for the Embla Carousel component. It allows you to incorporate a carousel component on any Laravel project by using a simple blade component and providing configuration properties to fit your specific needs.

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

[](#requirements)

- PHP 8.2+
- Laravel v10.0+
- TailwindCSS 3.4+
- AlpineJS 3.14+

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

[](#installation)

You can install the package via composer:

```
composer require tuto1902/carousel
```

Add the following line to `resources\js\app.js`. Make sure to add this line at the beginning of the file, or at least before AlpineJS is initialized.

```
import './../../vendor/tuto1902/carousel/resources/dist/carousel'
```

Add the following line to `tailwind.config.js` inside the content section

```
export default {
  presets: [],
  content: [
    ...
+    './vendor/tuto1902/carousel/resources/**/*.blade.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Then, compile all your assets using Vite

```
npm run build
```

Optionally, you can publish the views using

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

Usage
-----

[](#usage)

To get started, you can create a simple view using

```
php artisan make:view my-carousel-page
```

It's recommended to use a layout component so that all pages share the same boilerplate code. You can create a new layout component using

```
php artisan make:component AppLayout
```

This will create two files:

- app\\View\\Components\\AppLayout.php
- resources\\views\\components\\app-layout.php

Replace the content of `app-layout.blade.php` with the common HTML boilerplate to be shared among all views. Here's an example of a simple layout file.

```

        @vite('resources/css/app.css')

        {{$slot}}
    @vite('resources/js/app.js')

```

You can combine all components provided in this package to assemble your own caruosel. Here's an example. If you published the views using `php artisan vendor:publish`, you don't need to include the view namespace `x-carousel::` and you can simply use `` instead. Add this content to the view we created earlier

```

                    Slide 1

```

Finally, create a new route to see your new carousel in action.

```
use Illuminate\Support\Facades\Route;

Route::view('/', 'my-carousel-page');
```

You can include any of the following parameters to further customize the looks and feel of the carousel. For example, using the `loop` parameter, the carousel will loop around after reaching the last/first slide.

```

    ...

```

Here's a list of all available properties

PropertyAccepted ValuesDescriptionlooptrue/falseLoop back whean reaching the last/first slideorientationhorizontal/verticalChanges the carousel orientationautoplaytrue/falseWhen enabled, slides will autoplay after a delaydelaynumberControls the delay of the carousel autoplay in miliseconds. Default is 4000 (4 seconds)sizestringControls the size of the carousel. You can use any valid Tailwind CSS class. Default value is `size-96`. See [Tailwind CSS Documentation](https://tailwindcss.com/docs/size) for all possible values.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

41

—

FairBetter than 87% of packages

Maintenance63

Regular maintenance activity

Popularity14

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 75% 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 ~2 days

Total

4

Last Release

706d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/2152532?v=4)[Arturo Rojas](/maintainers/tuto1902)[@tuto1902](https://github.com/tuto1902)

---

Top Contributors

[![tuto1902](https://avatars.githubusercontent.com/u/2152532?v=4)](https://github.com/tuto1902 "tuto1902 (24 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

laravelcarouselTuto1902

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

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

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

###  Alternatives

[spatie/laravel-data

Create unified resources and data transfer objects

1.8k33.0M880](/packages/spatie-laravel-data)[spatie/laravel-pdf

Create PDFs in Laravel apps

1.0k4.3M42](/packages/spatie-laravel-pdf)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

328482.0k25](/packages/codewithdennis-filament-select-tree)[nativephp/desktop

NativePHP for Desktop

38133.6k8](/packages/nativephp-desktop)[worksome/exchange

Check Exchange Rates for any currency in Laravel.

124581.3k](/packages/worksome-exchange)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3913.7k](/packages/rawilk-profile-filament-plugin)

PHPackages © 2026

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