Responsive
Carousel works fine on any device: desktop, tablet or mobile an adapt number of items visible (configurable).
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.
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
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:
<!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>
<!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>
You are only at 3 simple steps to work with bulmaCarousel.
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"
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';
Now all that remains is to intiate the component to all elements you want to transform into a 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 => {
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);
});
}
// 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
}
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 |
true
|
pagination
|
Display pagination bullets |
true
|
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 } ]
|
Carousel component provides some public methods to manually work with it.
next() | ||
---|---|---|
Slide to next item | ||
Parameters | ||
none
|
||
Return values | ||
none
|
previous() | ||
---|---|---|
Slide to previous item | ||
Parameters | ||
none
|
||
Return values | ||
none
|
start() | ||
---|---|---|
Start autoplay | ||
Parameters | ||
none
|
||
Return values | ||
none
|
stop() | ||
---|---|---|
Stop autoplay | ||
Parameters | ||
none
|
||
Return values | ||
none
|
show(index, force) | ||
---|---|---|
Show item at "index" a | ||
Parameters | ||
index
|
Integer|null | Index of item to show |
force
|
Boolean | Animate transition if true (default) or not if false |
Return values | ||
none
|
reset() | ||
---|---|---|
Reset Carousel to initial values | ||
Parameters | ||
none
|
||
Return values | ||
none
|
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 |
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
|
Example working with "show" event:
// 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);
});
}