bulma.io Carousel/Slider component



Carousel works fine on any device: desktop, tablet or mobile an adapt number of items visible (configurable).


Many options to customize behavior. Use of sass variables to easily customize design.


Pure JavaScript to manage user interaction.

This component requires bulma.io to work. See bulma.io documentation first to know how to include it into your project.

There are several ways to get started with Bulma-extensions. You can either:

Use npm to install and stay up to date in the future

npm install bulma-carousel

Use the GitHub repository to get the latest development version

This method requires git installed on your computer.

git clone git://github.com/Wikiki/bulma-carousel.git

The component comes with various files:

Depending on your need your can use either pre-compiled files from dist directory or sources from src directory.

HTML Structure

The best way to start with carousel is to use a simple div to encaspulate your items. All child will then be used as Carousel Item. date input:


You are only at 3 simple steps to work with bulmaCarousel.

  • Include Stylesheet

    The first step is to include the stylesheet into your project. You can use either the minified CSS version or the Sass source to integrate it into a more global project.

    <link href="~bulma-carousel/dist/css/bulma-carousel.min.css" rel="stylesheet">

    @charset "utf-8"
    // Import Bulma core
    @import 'bulma.sass'
    // Import component
    @import "bulmaCarousel.sass"

  • Include JavaScript

    Second step is to include the JavaScript part of the component.

    <script src="~bulma-carousel/dist/js/bulma-carousel.min.js"></script>

    import bulmaCarousel from '~bulma-carousel/dist/js/bulma-carousel.min.js';

  • Initiate component

    Now all that remains is to intiate the component to all elements you want to transform into a Carousel

    The attach() method always return an array of Carousel instances (even if it targets only one element).
    Instantiation method is the same for classic & hero carousel.

    // 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 => {
    // To access to bulmaCarousel instance of an element
    var element = document.querySelector('#my-element');
    if (element) {
    	// bulmaCarousel instance is available as element.bulmaCarousel
    	element.bulmaCarousel.on('before-show', function(state) {

    // Initialize all input of date type.
    const carousels = bulmaCarousel.attach('.carousel', options);
    // To access to bulmaCarousel instance of an element
    const element = document.querySelector('#my-element');
    if (element) {
    	// bulmaCarousel instance is available as element.bulmaCarousel

Name Description Default value
Name Description Default value
initialSlide Initial item index 0
slidesToScroll Slide to scroll on each step 1
slidesToShow Slides to show at a time 1
navigation Display navigation buttons true
navigationKeys Enable navigation with arrow keys true
navigationSwipe Enable swipe navigation MM/DD/YYYY
pagination Display pagination bullets HH:mm
loop Activate loop display mode false
infinite Activate infinite display mode false
effect Animation effect for item transition (translate|fade) translate
duration Transition animation duration (in ms) 300
timing Transiation animation type ease
autoplay Autoplay carousel false
autoplaySpeed Time between each transition when autoplay is active (ms) 3000
pauseOnHover Stop autoplay when cursor hover carousel true
breakpoints List all breakpoints for responsiveness [{ changePoint: 480, slidesToShow: 1, slidesToScroll: 1 }, { changePoint: 640, slidesToShow: 2, slidesToScroll: 2 }, { changePoint: 768, slidesToShow: 3, slidesToScroll: 3 } ]
Options can be set using input data attributes. Just convert option name to dashes.
For example if you want to init a deta picker using inline display style with range capability and a validate button:

Carousel component provides some public methods to manually work with it.

Slide to next item
Return values
Slide to previous item
Return values
Start autoplay
Return values
Stop autoplay
Return values
show(index, force)
Show item at "index" a
index Integer|null Index of item to show
force Boolean Animate transition if true (default) or not if false
Return values
Reset Carousel to initial values
Return values

Carousel component provides some public Getters to manually access properties.

Name Description
Name Description
id Get component instance ID
index Get active item index
length Get number of items
slides Get all items as array
slidesToScroll Get current slidesToScroll
slidesToShow Get current slidesToShow
direction Get direction (rtl or ltr)
wrapper Get Carousel wrapper
wrapperWidth Get Carousel wrapper width
container Get Carousel container
containerWidth Get Carousel container width
slideWidth Get slide with
transitioner Get transitioner

Carousel component comes with Events Management API so you can easily react to its behavior.

Name Description Values
Name Description Values
ready Triggered when carousel is intialized (DO NOT USE IT but pass callback into the onReady option) bulmaCarousel State object instance
before:show Triggered before showing item bulmaCarousel State object instance
show Triggered when item is displayed bulmaCarousel State object instance
after:show Triggered once item has been displayed bulmaCarousel State object instance
start Triggered when autoplay start bulmaCarousel State object instance
stop Triggered when autoplay stop bulmaCarousel State object instance