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

ActiveLibrary

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

Embla carousel wrapper for Laravel

v1.0.3(1y ago)1451[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 1mo ago

READMEChangelog (4)Dependencies (8)Versions (16)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 89% of packages

Maintenance66

Regular maintenance activity

Popularity16

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity60

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

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 (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

[vormkracht10/laravel-mails

Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app.

24149.7k](/packages/vormkracht10-laravel-mails)[spatie/laravel-prometheus

Export Laravel metrics to Prometheus

2651.3M6](/packages/spatie-laravel-prometheus)[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)[scalar/laravel

Render your OpenAPI-based API reference

6183.9k2](/packages/scalar-laravel)[ralphjsmit/laravel-helpers

A package containing handy helpers for your Laravel-application.

13704.6k2](/packages/ralphjsmit-laravel-helpers)[musahmusah/laravel-multipayment-gateways

A Laravel Package that makes implementation of multiple payment Gateways endpoints and webhooks seamless

852.2k1](/packages/musahmusah-laravel-multipayment-gateways)

PHPackages © 2026

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