--- layout: default route: index fixed-navbar: false title: Quick-Start subtitle: bulma.io Carousel/Slider component --- {% capture component_include_css %} {% endcapture %} {% capture component_include_sass %} @charset "utf-8" // Import Bulma core @import 'bulma.sass' // Import component @import "bulmaCarousel.sass" {% endcapture %} {% capture component_include_es5 %} {% endcapture %} {% capture component_include_es6 %} import bulmaCarousel from '~bulma-carousel/dist/js/bulma-carousel.min.js'; {% endcapture %} {% capture component_starter_template %} Hello Bulma!
{% endcapture %} {% capture component_hero_starter_template %} Hello Bulma!
{% endcapture %} {% capture component_dataset %}
{% endcapture %} {% capture component_init_es5 %} // 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('#my-element'); if (element && element.bulmaCarousel) { // bulmaCarousel instance is available as element.bulmaCarousel element.bulmaCarousel.on('before-show', function(state) { console.log(state); }); } {% endcapture %} {% capture component_init_es6 %} // Initialize all elements with carousel class. const carousels = bulmaCarousel.attach('.carousel', options); // To access to bulmaCarousel instance of an element const element = document.querySelector('#my-element'); if (element && element.bulmaCarousel) { // bulmaCarousel instance is available as element.bulmaCarousel } {% endcapture %} {% capture component_instance_access %} // Access to bulmaCarousel instance of an element var element = document.querySelector('#my-element'); if (element && element.bulmaCarousel) { // bulmaCarousel instance is available as element.bulmaCarousel } {% endcapture %} {% capture component_events %} // Initialize all elements with carousel class. const carousels = bulmaCarousel.attach('.carousel', options); // To access to bulmaCarousel instance of an element const element = document.querySelector('#my-element'); if (element && element.bulmaCarousel) { // bulmaCarousel instance is available as element.bulmaCarousel element.bulmaCarousel.on('show', function(bulmaCarouselInstance) { console.log(bulmaCarouselInstance.index); }); } {% endcapture %} {% include anchor.html name="Features" %}

Responsive

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

Customization

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

Javascript

Pure JavaScript to manage user interaction.

{% include anchor.html name="Installation" %}
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

{% highlight shell %}npm install bulma-carousel{% endhighlight %}

Use the GitHub repository to get the latest development version

This method requires git installed on your computer.

{% highlight shell %}git clone git://github.com/Wikiki/bulma-carousel.git{% endhighlight %}
{% include anchor.html name="Starter Template" %}

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.

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:

{% highlight html %}{{ component_starter_template }}{% endhighlight %}

{% highlight html %}{{ component_hero_starter_template }}{% endhighlight %}

{% include anchor.html name="Integration" %}
This component requires bulma.io to work. See bulma.io documentation first to know how to install it.

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

{% include anchor.html name="Options" %} {% include options.html %}
Options can be set using input data attributes. Just convert option name to dashes.
For example if you want to init a carousel with SlidesToScroll option set to "2": {% highlight html %}{{ component_dataset }}{% endhighlight %}
{% include anchor.html name="Methods" %}

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

{% include methods.html %}
{% include anchor.html name="Getters" %}

Carousel component provides some public Getters to manually access properties.

{% include getters.html %}

Reminder: You can easily access to bulmaCarousel instance from a DOM element using the following code:

{% highlight javascript %}{{ component_instance_access }}{% endhighlight %}
{% include anchor.html name="Events" %}

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

{% include events.html %}

Example working with "show" event:

{% highlight javascript %}{{ component_events }}{% endhighlight %}