bulma-extensions
Version:
Set of extensions for Bulma.io CSS Framework
396 lines (358 loc) • 12.7 kB
HTML
---
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 %}
<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 %}
<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>