Alpine Embla

This is a very simple Alpine.js plugin to use the Embla Carousel.

Installation

npm install @abuffseagull/alpine-embla

This pulls in embla as a dependency, no need to install it separately.

Usage

Initialize Plugin

Add the plugin to Alpine:

import Alpine from "alpinejs";
import embla from "@abuffseagull/alpine-embla";

// NOTE! this plugin needs to be called, unlike the first-party plugins
Alpine.plugin(embla());

// ...

Basic

Use the x-carousel directive to initialize the carousel with default settings. Make sure to follow the HTML structure that Embla requires.

<div class="embla__viewport" x-data x-carousel>
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>

Advanced

Check the examples for more advanced use cases.

The reason the plugin is a function that needs to be called is to allow for setting Global options.

So if you want all carousels to loop, you can do:

import Alpine from "alpinejs";
import embla from "@abuffseagull/alpine-embla";

Alpine.plugin(embla({ loop: true }));

// ...

Plugins

Autoplay and Auto Scroll have already been added. I'll fill out the docs later.

CDN Usage

Coming soon?