"element.bulmaCarousel" returns undefined

[Drillan767]

Hello, I discovered "bulma-carousel" just yesterday night, and I loved how fast it was to setup the basic carousel!

However, I have struggles to understand how you use the API. In my case, I would like to display "external" bullet buttons (that look more like actual buttons, with text in it).

My HTML looks like so:

    <div id="compoimage">
        composé à l'image
    </div>
    <div id="puremusic">
        musique pure
    </div>

    <section class="music">
            <div id="carousel" class="carousel">
                <div class="item-1">
                    Composé à l'image
                </div>
                <div class="item-2">
                    Musique pure
                </div>
            </div>
    </section>

And my JS, like so:

const carousel = bulmaCarousel.attach('#carousel', {
    slidesToScroll: 1,
    slidesToShow: 1,
    navigation: false
});

document.getElementById('puremusic').addEventListener('click', () => {
    if (carousel && carousel.bulmaCarousel) {
        carousel.bulmaCarousel.show(1, true)
    }
});

However, I have several problems:

When I do console.log(carousel.bulmaCarousel) , I get "undefined". However, when I do console.log(carousel), I get the following:

Which is an array, which is why I get 'undefined' when I tried to console.log(carousel.bulmaCarousel)

So, what would be the best way to trigger my carousel to 0 or 1 when clicking on a div? I can't manage to understand the documentation.

Thank you in advance

[Drillan767]

My bad, I just realized I needed something such as

carousel[0].next();

And nothing more