Multiple carousel with same class

[bckthomas]

Hi
I would like to have multiple carousel on the same page with the same class, but I can't find the solution.
Does anybody have the solution ?

Thanks

[fancyapps]

Hi,

There's no reason why you can't have multiple carousels on the same page with the same class. Please, create a working demo in any code playground where your issue could be tested.

[bckthomas]

Hi @fancyapps
Here you can find the code : https://codepen.io/thmbck/pen/XWgZdve
As you can see, only the first carousel works

Thanks for your help

[fancyapps]

Well, your code is working as it should, I don't know what you expected. If you want to create multiple carousels, just initialize each one - https://codepen.io/fancyapps/pen/bGRLeOW?editors=1010

[fatmarker]

We have a use case for this. Our content authors can add a carousel to the page. The caurosel always has the same function and look, though different content of course. How can I make sure each container with the same class gets initialized with the same option set? Thanks!

[fancyapps]

You can also pass reference to the DOM element, like this:

for (const item of Array.from(document.querySelectorAll(".carousel"))) {
  new Carousel(item, {
    slides: [
      {
        html: "1",
      },
      {
        html: "2",
      },
      {
        html: "3",
      },
    ],
  });
}

[fatmarker]

Ahhh, nice. That works, thank you!