Colors No
Sizes No
Javascript Yes
Variables Yes

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

<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 up to 5 items (usefull to display list of partners for example)

<div class='carousel is-5 carousel-animated carousel-animate-slide'>
<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 display the navigation conatiner

<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 carousel to autoPlay by adding data-autoplay="true"'s attribute to the carousel element.

Manage the delay between slides by adding data-delay="5000"'s 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 added to carousel-animate-slide or carousel-animate-fade modifiers directly on carousel element.

Fade animation only works with hero-carousel.

You can even use carousel within hero by using hero-carousel instead of carousel class 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 #

You don't have to write any JavaScript code.


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>

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