JSFiddle - React, Tailwind, and code Playground

by xaliber

HTML

<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-carousel.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-carousel.min.js"></script>
<section class="hero">
  <div id="udl-carousel" class="carousel">
    <div class="item-1">
      <div class="card">
        <div class="card-image">
          <figure class="image is-16by9 is-covered">
            <img class="" src="https://images.unsplash.com/photo-1550945771-515f118cef86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="">
          </figure>
        </div>
      </div>
    </div>
    <div class="item-2">
      <div class="card">
        <div class="card-image">
          <figure class="image is-16by9 is-covered">
            <img class="" src="https://images.unsplash.com/photo-1550921082-c282cdc432d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
          </figure>
        </div>
      </div>
    </div>
    <div class="item-3">
      <div class="card">
        <div class="card-image">
          <figure class="image is-16by9 is-covered">
            <img class="" src="https://images.unsplash.com/photo-1550931937-2dfd45a40da0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
          </figure>
        </div>
      </div>
    </div>
    <div class="item-4">
      <div class="card">
        <div class="card-image">
          <figure class="image is-16by9 is-covered">
            <img class="" src="https://images.unsplash.com/photo-1550930516-af8b8cc4f871?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="">
          </figure>
        </div>
      </div>
    </div>
  </div>
</section>

JavaScript

bulmaCarousel.attach('#udl-carousel', {
  slidesToScroll: 1,
  slidesToShow: 1,
  navigation: true,
  navigationKeys: true,
  navigationSwipe: true,
  loop: true
});

// Initialize all div with carousel class
var carousels = bulmaCarousel.attach('.carousel', options);

// Loop on each carousel initialized
for (var i = 0; i < carousels.length; i++) {
  // Add listener to  event
  carousels[i].on('before:show', state => {
    console.log(state);
  });
}

// Access to bulmaCarousel instance of an element
var element = document.querySelector('#udl-carousel');
if (element && element.bulmaCarousel) {
  // bulmaCarousel instance is available as element.bulmaCarousel
  element.bulmaCarousel.on('before-show', function(state) {
    console.log(state);
  });
}