---
layout: default
route: index
fixed-navbar: false
title: Quick-Start
subtitle: bulma.io Carousel/Slider component
---

{% capture component_include_css %}
<link href="~bulma-carousel/dist/css/bulma-carousel.min.css" rel="stylesheet">
{% endcapture %}

{% capture component_include_sass %}
@charset "utf-8"

// Import Bulma core
@import 'bulma.sass'

// Import component
@import "bulmaCarousel.sass"
{% endcapture %}

{% capture component_include_es5 %}
<script src="~bulma-carousel/dist/js/bulma-carousel.min.js"></script>
{% endcapture %}

{% capture component_include_es6 %}
import bulmaCarousel from '~bulma-carousel/dist/js/bulma-carousel.min.js';
{% endcapture %}

{% capture component_starter_template %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Hello Bulma!</title>
		<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/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
	</head>
  	<body>
		<section class="section">
			<div class="container">
				<!-- Start Carousel -->
				<div id="carousel-demo" class="carousel">
					<div class="item-1">
						<!-- Slide Content -->
					</div>
					<div class="item-2">
						<!-- Slide Content -->
					</div>
					<div class="item-3">
						<!-- Slide Content -->
					</div>
				</div>
				<!-- End Carousel -->
			</div>
		</section>

		<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
		<script>
		bulmaCarousel.attach('#carousel-demo', {
			slidesToScroll: 1,
			slidesToShow: 4
		});
		</script>
	</body>
</html>
{% endcapture %}

{% capture component_hero_starter_template %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Hello Bulma!</title>
		<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/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
	</head>
	<body>
		<!-- Start Hero Carousel -->
		<section class="hero is-medium has-carousel">
			<div id="carousel-demo" class="hero-carousel">
				<div class="item-1">
					<!-- Slide Content -->
				</div>
				<div class="item-2">
					<!-- Slide Content -->
				</div>
				<div class="item-3">
					<!-- Slide Content -->
				</div>
			</div>
			<div class="hero-head"></div>
			<div class="hero-body"></div>
			<div class="hero-foot"></div>
		</section>
		<!-- End Hero Carousel -->

		<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
		<script>
			bulmaCarousel.attach('#carousel-demo', {
				slidesToScroll: 1,
				slidesToShow: 4
			});
		</script>
	</body>
</html>
{% endcapture %}

{% capture component_dataset %}
<div class="carousel" data-slides-to-scroll="2">
	<div class="item-1"></div>
	<div class="item-2"></div>
	<div class="item-3"></div>
</div>
{% 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" %}
<div class="columns is-multiline is-variable is-6">
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-desktop"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Responsive</h1>
					<p>Carousel works fine on any device: desktop, tablet or mobile an adapt number of items visible (configurable).</p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-paint-brush"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Customization</h1>
					<p>Many options to customize behavior. Use of sass variables to easily customize design.</p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fab fa-2x fa-js"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Javascript</h1>
					<p>Pure JavaScript to manage user interaction.</p>
				</div>
			</div>
		</article>
	</div>
</div>

{% include anchor.html name="Installation" %}
<article class="message is-warning">
	<div class="message-body">
		This component requires bulma.io to work. See <a href="https://bulma.io/documentation/overview/start/" target="_blank">bulma.io
			documentation</a> first to know how to include it into your project.
	</div>
</article>
<p>There are several ways to get started with Bulma-extensions. You can either:</p>

<section class="section is-paddingless">
	<div class="tabs">
		<ul>
			<li class="is-active"><a href="#install-npm">Npm</a></li>
			<li><a href="#install-github">Github</a> </li>
		</ul>
	</div>

	<div class="tab-contents">
		<div id="install-npm" class="tab-content is-active">
			<p>Use npm to install and stay up to date in the future</p>
			{% highlight shell %}npm install bulma-carousel{% endhighlight %}
		</div>

		<div id="install-github" class="tab-content">
			<p>Use the GitHub repository to get the latest development version</p>
			<p class="help">This method requires git installed on your computer.</p>
			{% highlight shell %}git clone git://github.com/Wikiki/bulma-carousel.git{% endhighlight %}
		</div>
	</div>
</section>

{% include anchor.html name="Starter Template" %}
<section class="section is-paddingless">
	<p>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. </p>
	<p>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:</p>
	<div class="tabs">
		<ul>
			<li class="is-active"><a href="#classic-carousel">Classic Carousel</a></li>
			<li><a href="#hero-carousel">Hero Carousel</a></li>
		</ul>
	</div>

	<div class="tab-contents">
		<div id="classic-carousel" class="tab-content is-active">
			<p>{% highlight html %}{{ component_starter_template }}{% endhighlight %}</p>
		</div>
		<div id="hero-carousel" class="tab-content">
			<p>{% highlight html %}{{ component_hero_starter_template }}{% endhighlight %}</p>
		</div>
	</div>
</section>

{% include anchor.html name="Integration" %}
<section class="section is-paddingless">
	<article class="message is-warning">
		<div class="message-body">
			This component requires bulma.io to work. See <a href="https://bulma.io/documentation" target="_blank">bulma.io
				documentation</a> first to know how to install it.
		</div>
	</article>
	<p>You are only at 3 simple steps to work with bulmaCarousel.</p>
	<ul class="step-text">
		<li>
			<h6 class="title is-6">Include Stylesheet</h6>
			<p>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.</p>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#include-css">Css</a></li>
					<li><a href="#include-sass">Sass</a></li>
				</ul>
			</div>

			<div class="tab-contents">
				<div id="include-css" class="tab-content is-active">
					<p>{% highlight html %}{{ component_include_css }}{% endhighlight %}</p>
				</div>
				<div id="include-sass" class="tab-content">
					<p>{% highlight html %}{{ component_include_sass }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
		<li>
			<h6 class="title is-6">Include JavaScript</h6>
			<p>Second step is to include the JavaScript part of the component.</p>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#import-es5">ES5</a></li>
					<li><a href="#import-es6">ES6</a></li>
				</ul>
			</div>

			<div class="tab-contents">
				<div id="import-es5" class="tab-content is-active">
					<p>{% highlight html %}{{ component_include_es5 }}{% endhighlight %}</p>
				</div>
				<div id="import-es6" class="tab-content">
					<p>{% highlight javascript %}{{ component_include_es6 }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
		<li>
			<h6 class="title is-6">Initiate component</h6>
			<p>Now all that remains is to intiate the component to all elements you want to transform into a Carousel</p>
			<article class="message is-warning">
				<div class="message-body">
					The <code>attach()</code> method <strong>always</strong> return an array of Carousel instances (even if it
					targets only one element).
				</div>
			</article>
			<article class="message is-warning">
				<div class="message-body">
					Instantiation method is the same for classic & hero carousel.
				</div>
			</article>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#init-es5">ES5</a></li>
					<li><a href="#init-es6">ES6</a></li>
				</ul>
			</div>

			<div class="tab-contents">
				<div id="init-es5" class="tab-content is-active">
					<p>{% highlight javascript %}{{ component_init_es5 }}{% endhighlight %}</p>
				</div>
				<div id="init-es6" class="tab-content">
					<p>{% highlight javascript %}{{ component_init_es6 }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
	</ul>
</section>

{% include anchor.html name="Options" %}
{% include options.html %}

<article class="message is-info">
	<div class="message-body">
		Options can be set using input data attributes. Just convert option name to dashes.<br />
		<i>For example if you want to init a carousel with SlidesToScroll option set to "2":</i>
		{% highlight html %}{{ component_dataset }}{% endhighlight %}
	</div>
</article>

{% include anchor.html name="Methods" %}
<section class="section is-paddingless">
	<p>Carousel component provides some public methods to manually work with it.</p>
	{% include methods.html %}
</section>

{% include anchor.html name="Getters" %}
<section class="section is-paddingless">
	<p>Carousel component provides some public Getters to manually access properties.</p>
	{% include getters.html %}

	<article class="message is-info">
		<div class="message-body">
			<p>Reminder: You can easily access to bulmaCarousel instance from a DOM element using the following code:</p>
			{% highlight javascript %}{{ component_instance_access }}{% endhighlight %}
		</div>
	</article>	
</section>

{% include anchor.html name="Events" %}
<section class="section is-paddingless">
	<p>Carousel component comes with Events Management API so you can easily react to its behavior.</p>
	{% include events.html %}
	
	<p>Example working with "show" event:</p>
	{% highlight javascript %}{{ component_events }}{% endhighlight %}
</section>