Colors No
Sizes No
Javascript Yes
Variables Yes

This extension is based on the wonderful job done by Killian Charpentier.

This carousel is handling swipe (by touch and/or mouse) to slide between items.


<div class='carousel carousel-animated carousel-animate-slide'>
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

You can display multiple items (usefull to display list of partners for example)

<div class='carousel carousel-animated carousel-animate-slide' data-size="5">
  <div class='carousel-container'>
    <div class='carousel-item is-active'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
    <div class='carousel-item'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
    <div class='carousel-item'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
    <div class='carousel-item'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
    <div class='carousel-item'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
    <div class='carousel-item'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
    <div class='carousel-item'>
      <figure class="image is-2by1"><img src="https://bulma.io/images/placeholders/640x320.png"></figure>
    </div>
  </div>
  <div class="carousel-navigation is-centered">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

You can modify the way to display the navigation container

<div class='carousel carousel-animated carousel-animate-slide'>
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

Centered

<div class='carousel carousel-animated carousel-animate-slide'>
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation is-centered">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

Overlay

<div class='carousel carousel-animated carousel-animate-slide'>
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation is-overlay">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

AutoPlay #

You can set the carousel to autoPlay by adding the data-autoplay="true" attribute to the carousel element.

Manage the delay between slides by adding the data-delay="5000" attribute (default value is 5s).

<div class='carousel carousel-animated carousel-animate-slide' data-autoplay="true">
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation is-centered">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

Animation #

You can animate the carousel by using the carousel-animated along with either the carousel-animate-slide or carousel-animate-fade modifiers directly on the carousel element.

<div class='carousel carousel-animated carousel-animate-fade'>
  <div class='carousel-container'>
    <div class='carousel-item has-background is-active'>
      <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
      <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
      <div class="title">Sushi time</div>
    </div>
    <div class='carousel-item has-background'>
      <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
      <div class="title">Life</div>
    </div>
  </div>
  <div class="carousel-navigation">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

You can use the carousel within a .hero by using .hero-carousel instead of .carousel to the main container

<section class="hero is-medium has-carousel">
  <div class="hero-carousel carousel-animated carousel-animate-fade">
    <div class='carousel-container'>
      <div class='carousel-item has-background is-active'>
        <img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" />
      </div>
      <div class='carousel-item has-background'>
        <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" />
      </div>
      <div class='carousel-item has-background'>
        <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" />
      </div>
      <div class='carousel-item has-background'>
        <img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" />
      </div>
    </div>
    <div class="carousel-navigation is-overlay">
      <div class="carousel-nav-left">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </div>
      <div class="carousel-nav-right">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </div>
    </div>
  </div>
  <div class="hero-head">
    <nav class="navbar is-transparent">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroA">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroA" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item has-text-white is-active">
              Home
            </a>
            <a class="navbar-item has-text-white">
              Examples
            </a>
            <a class="navbar-item has-text-white">
              Documentation
            </a>
            <span class="navbar-item has-text-white">
              <a class="button is-primary is-inverted">
                <span class="icon">
                  <i class="fa fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <div class="hero-body has-text-centered">
    <div class="columns is-mobile is-centered">
      <div class="column is-half is-narrow">
        <div class="field has-addons">
          <div class="control is-expanded">
            <input class="input" type="text" placeholder="Find a repository">
          </div>
          <div class="control">
            <a class="button is-info">
              Search
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a class="has-text-white">Modifiers</a></li>
          <li><a class="has-text-white">Grid</a></li>
          <li><a class="has-text-white">Elements</a></li>
          <li><a class="has-text-white">Components</a></li>
          <li><a class="has-text-white">Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Javascript #

Javascript

The extension comes with a JavaScript implementation to manage carousel items navigation. Don't forget to include it in your project.

<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-carousel/dist/bulma-carousel.min.js"></script>

Then just add the following code once your DOM's ready:

var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances

You can react on different events by using

CarouselInstance.on('carousel:ready', function(item) {});

Name Triggered at
carousel:ready once carousel has been iniatited
carousel:slide:before just before sliding
carousel:slide:after just after sliding

Each event send an object as parameter with following properties:

Property Description
carousel The carousel instance that triggered the event.
node The Node element related to the current slide item.
pos The position (items relative) of the current item.

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$carousel-nav-background rgba($white, 0.7)
$carousel-nav-color $text
$carousel-title-background rgba($white, 0.6)
$carousel-title-size $size-7