[Help]: How to use plugins when initializing Embla using Alpine JS

[MikeHarrison]

Summary

Hi,

I have been using Embla alongside Alpine JS for a few projects, and it is working great.

Now I have come to the point where I need to use plugins (in this case Autoplay and Fade), and I am not sure how to use them when working with Embla in this way.

I have added a link to my Codepen where I have set up Embla & Alpine the way I would for a project. If anyone has any pointers on what I could do here that would be super.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codepen.io/MikeHarrisonDesign/pen/VwOarZp

[davidjerleke]

Hi @MikeHarrison,

I don't know anything about how AlpineJs works, but following your current setup I got it working like this:

import EmblaCarousel from "https://esm.sh/embla-carousel";
import EmblaCarouselAutoplay from "https://esm.sh/embla-carousel-autoplay"; // <-- Add this
import Alpine from "https://esm.sh/alpinejs";

window.EmblaCarousel = EmblaCarousel;
window.EmblaCarouselAutoplay = EmblaCarouselAutoplay;  // <-- Add this

window.Alpine = Alpine;
Alpine.start(); 

And your HTML:

<div class="py-6 bg-gray-50 rounded-lg border-gray-300 border shadow-inner"
    x-data="{embla: null, activeSlide: 0}"
    x-init="() => {
      embla = EmblaCarousel($refs.viewport, {loop: true}, [EmblaCarouselAutoplay()] /* <-- Add this */);
      embla.on('select', () => {
        activeSlide = embla.selectedScrollSnap();
      });
    }"
>
  ...
</div>

You can read more about adding plugins here in the docs.

[MikeHarrison]

Hi David,

That's working perfectly, thanks so much for your help

[davidjerleke]

@MikeHarrison please mark my comment as answer if it helped. Thanks!