Because images can take a few seconds to load (or not at all), use the image container to specify a precisely sized
container so that your layout isn't broken because of image loading or image errors - Bulma image.
Carousel
A Slideshow for cycling images in confined spaces
<template>
<b-carousel>
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section :class="`hero is-medium is-${carousel.color}`">
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.text}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</template>
<script>
export default {
data(){
return {
carousels: [
{ text: 'Slide 1', color: 'primary' },
{ text: 'Slide 2', color: 'info' },
{ text: 'Slide 3', color: 'success' },
{ text: 'Slide 4', color: 'warning' },
{ text: 'Slide 5', color: 'danger' }
]
}
}
}
</script>
# Custom
<template>
<section>
<div style="padding: 1.5rem">
<b-field grouped group-multiline position="is-centered">
<b-switch v-model="autoPlay">Autoplay</b-switch>
<b-switch v-model="pauseHover" :disabled="!autoPlay">Pause on hover</b-switch>
<b-switch v-model="pauseInfo" :disabled="!pauseHover">Pause info</b-switch>
<b-switch v-model="drag">Drag event</b-switch>
</b-field><br>
<b-field grouped group-multiline position="is-centered">
<b-field label="Value">
<b-numberinput v-model="carousel" min="0" :max="carousels.length - 1" controls-position="compact"/>
</b-field>
<b-field label="Interval">
<b-numberinput v-model="interval" min="0" controls-position="compact" step="1000" :disabled="!autoPlay"/>
</b-field>
<b-field label="Animated">
<b-field>
<b-radio-button v-model="animated"
native-value="fade">
Fade
</b-radio-button>
<b-radio-button v-model="animated"
native-value="slide">
Slide
</b-radio-button>
</b-field>
</b-field>
<b-field label="Pause Type">
<b-select v-model="pauseType" :disabled="!pauseInfo">
<option value="is-white">is-white</option>
<option value="is-dark">is-dark</option>
<option value="is-primary">is-primary</option>
</b-select>
</b-field>
</b-field>
</div>
<b-carousel
v-model="carousel"
:animated="animated"
:has-drag="drag"
:autoplay="autoPlay"
:pause-hover="pauseHover"
:pause-info="pauseInfo"
:pause-info-type="pauseType"
:interval="interval"
@change="info($event)">
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section :class="`hero is-medium is-${carousel.color} is-bold`">
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.title}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</section>
</template>
<script>
export default {
data() {
return {
carousel: 0,
animated: 'fade',
drag: false,
autoPlay: false,
pauseHover: false,
pauseInfo: false,
pauseType: 'is-primary',
interval: 3000,
carousels: [
{ title: 'Slide 1', color: 'dark' },
{ title: 'Slide 2', color: 'primary' },
{ title: 'Slide 3', color: 'info' },
{ title: 'Slide 4', color: 'success' },
{ title: 'Slide 5', color: 'warning' },
{ title: 'Slide 6', color: 'danger' }
]
}
},
methods: {
info(value) {
this.carousel = value
this.$buefy.toast.open({
message: `This Slide ${value} !`,
type: 'is-info'
})
}
}
}
</script>
# Arrow
<template>
<section>
<div style="padding: 1.5rem">
<b-field grouped group-multiline position="is-centered">
<b-switch v-model="arrow"><strong>Arrow</strong></b-switch>
<b-switch v-model="arrowBoth" :disabled="!arrow">Both</b-switch>
<b-switch v-model="arrowHover" :disabled="!arrow">Hover</b-switch>
</b-field><br>
<b-field grouped group-multiline position="is-centered">
<b-field label="Icon Pack">
<b-input v-model="iconPack" placeholder="e.g. mdi, fa or other"/>
</b-field>
<b-field label="Icon Size">
<b-select v-model="iconSize">
<option value="">default</option>
<option value="is-small">is-small</option>
<option value="is-medium">is-medium</option>
<option value="is-large">is-large</option>
</b-select>
</b-field>
<b-field label="Icon Prev">
<b-input v-model="iconPrev"/>
</b-field>
<b-field label="Icon Next">
<b-input v-model="iconNext"/>
</b-field>
</b-field>
</div>
<b-carousel
:arrow="arrow"
:arrow-both="arrowBoth"
:arrow-hover="arrowHover"
:icon-pack="iconPack"
:icon-prev="iconPrev"
:icon-next="iconNext"
:icon-size="iconSize">
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section :class="`hero is-medium is-${carousel.color}`">
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.title}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</section>
</template>
<script>
export default {
data() {
return {
arrow: true,
arrowBoth: false,
arrowHover: false,
iconPack: 'mdi',
iconPrev: 'arrow-left',
iconNext: 'arrow-right',
iconSize: '',
carousels: [
{ title: 'Slide 1', color: 'info' },
{ title: 'Slide 2', color: 'success' },
{ title: 'Slide 3', color: 'warning' },
{ title: 'Slide 4', color: 'danger' }
]
}
}
}
</script>
# Progress
<template>
<section>
<div style="padding: 1.5rem">
<b-field grouped group-multiline position="is-centered">
<b-field>
<b-switch v-model="progress"><strong>Progress</strong></b-switch>
</b-field>
<b-field label="Type" label-position="on-border">
<b-select v-model="progressType" :disabled="!progress">
<option value="is-primary">is-primary</option>
<option value="is-info">is-info</option>
<option value="is-success">is-success</option>
<option value="is-warning">is-warning</option>
<option value="is-danger">is-danger</option>
<option value="is-white">is-white</option>
<option value="is-light">is-light</option>
<option value="is-dark">is-dark</option>
</b-select>
</b-field>
</b-field>
</div>
<b-carousel
:progress="progress"
:progress-type="progressType">
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section :class="`hero is-medium is-${carousel.color}`">
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.title}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</section>
</template>
<script>
export default {
data() {
return {
progress: true,
progressType: 'is-primary',
carousels: [
{ title: 'Slide 1', color: 'grey' },
{ title: 'Slide 2', color: 'dark' },
{ title: 'Slide 3', color: 'primary' },
{ title: 'Slide 4', color: 'info' }
]
}
}
}
</script>
# Indicator
<template>
<section>
<div style="padding: 1.5rem">
<b-field grouped group-multiline position="is-centered">
<b-switch v-model="indicator"><strong>Indicator</strong></b-switch>
<b-switch v-model="indicatorBackground" :disabled="!indicator">Background</b-switch>
<b-switch v-model="indicatorInside" :disabled="!indicator">Inside</b-switch>
</b-field><br>
<b-field grouped group-multiline position="is-centered">
<b-field label="Position" :disabled="!indicator">
<b-select v-model="indicatorPosition">
<option value="is-bottom">is-bottom</option>
<option value="is-top">is-top</option>
</b-select>
</b-field>
<b-field label="Mode">
<b-field>
<b-radio-button v-model="indicatorMode" native-value="click" :disabled="!indicator">
<span>Click</span>
</b-radio-button>
<b-radio-button v-model="indicatorMode" native-value="hover" :disabled="!indicator">
<span>Hover</span>
</b-radio-button>
</b-field>
</b-field>
<b-field label="Style">
<b-field>
<b-radio-button v-model="indicatorStyle" native-value="is-boxs" :disabled="!indicator">
<span>Boxs</span>
</b-radio-button>
<b-radio-button v-model="indicatorStyle" native-value="is-dots" :disabled="!indicator">
<span>Dots</span>
</b-radio-button>
<b-radio-button v-model="indicatorStyle" native-value="is-lines" :disabled="!indicator">
<span>Lines</span>
</b-radio-button>
</b-field>
</b-field>
</b-field>
</div>
<b-carousel
:indicator="indicator"
:indicator-background="indicatorBackground"
:indicator-inside="indicatorInside"
:indicator-mode="indicatorMode"
:indicator-position="indicatorPosition"
:indicator-style="indicatorStyle">
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section :class="`hero is-medium is-${carousel.color}`">
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.title}}</h1>
</div>
</section>
</b-carousel-item>
</b-carousel>
</section>
</template>
<script>
export default {
data() {
return {
indicator: true,
indicatorBackground: true,
indicatorInside: true,
indicatorMode: 'hover',
indicatorPosition: 'is-top',
indicatorStyle: 'is-lines',
carousels: [
{ title: 'Slide 1', color: 'info' },
{ title: 'Slide 2', color: 'success' },
{ title: 'Slide 3', color: 'warning' },
{ title: 'Slide 4', color: 'danger' }
]
}
}
}
</script>
Some source by Picsum and Images from Unsplash.
# Custom Indicators
When images more than 6 add
If want custom indicator to stay big, use
indicator-customIf want custom indicator to stay big, use
is-medium on indicator-custom-size<template>
<b-carousel :indicator-inside="false">
<b-carousel-item v-for="(item, i) in 6" :key="i">
<span class="image">
<img :src="getImgUrl(i)">
</span>
</b-carousel-item>
<template slot="indicators" slot-scope="props">
<span class="al image">
<img :src="getImgUrl(props.i)" :title="props.i">
</span>
</template>
</b-carousel>
</template>
<script>
export default {
methods: {
getImgUrl(value) {
return `https://picsum.photos/id/43${value}/1230/500`
}
}
}
</script>
<style>
.is-active .al img {
filter: grayscale(0%);
}
.al img {
filter: grayscale(100%);
}
</style>
# Switch like a gallery
You may also want to add is-clipped modifier to a containing element (usually html) to stop scroll overflow.
<template>
<b-carousel :autoplay="false" indicator-custom :indicator-inside="false" :overlay="gallery">
<b-carousel-item v-for="(item, i) in 20" :key="i">
<a @click="switchGallery(true)" class="image ">
<img :src="getImgUrl(i)">
</a>
</b-carousel-item>
<span v-if="gallery" @click="switchGallery(false)" class="modal-close is-large"/>
<template slot="indicators" slot-scope="props">
<figure class="al image" :draggable="false">
<img :draggable="false" :src="getImgUrl(props.i)" :title="props.i">
</figure>
</template>
</b-carousel>
</template>
<script>
export default {
data() {
return {
gallery: false
}
},
methods: {
getImgUrl(value) {
value += 50
return `https://picsum.photos/id/10${value}/1230/500`
},
switchGallery(value) {
this.gallery = value
if (value) {
return document.documentElement.classList.add('is-clipped')
} else {
return document.documentElement.classList.remove('is-clipped')
}
}
}
}
</script>
<style>
.is-active .al img {
border: 1px solid #fff;
filter: grayscale(0%);
}
.al img {
border: 1px solid transparent;
filter: grayscale(100%);
}
</style>
# Carousel List
An imposing carousel list to showcase viewer something.
<template>
<section>
<div style="padding: 1.5rem">
<b-field grouped group-multiline position="is-centered">
<b-switch v-model="arrow">Arrow</b-switch>
<b-switch v-model="arrowHover" :disabled="!arrow">Arrow on hover</b-switch>
<b-switch v-model="drag">Drag event</b-switch>
<b-switch v-model="gray" :disabled="opacity">Grayscale</b-switch>
<b-switch v-model="opacity" :disabled="gray">Opacity</b-switch>
<b-switch v-model="repeat">Repeat</b-switch>
</b-field><br>
<b-field grouped group-multiline position="is-centered">
<b-field label="Value">
<b-numberinput v-model="values" min="0" :max="items.length - 1" controls-position="compact"/>
</b-field>
<b-field label="Items to List">
<b-numberinput v-model="perList" min="0" :max="items.length - 1" controls-position="compact"/>
</b-field>
</b-field>
</div>
<b-carousel-list
v-model="values"
:data="items"
:arrow="arrow"
:arrow-hover="arrowHover"
:items-to-list="perList"
:repeat="repeat"
:has-drag="drag"
:has-grayscale="gray"
:has-opacity="opacity" />
</section>
</template>
<script>
export default {
data() {
return {
arrow: true,
arrowHover: true,
drag: true,
gray: false,
opacity: false,
values: 1,
perList: 1,
repeat: false,
items: [
{
title: 'Slide 1',
image: 'https://picsum.photos/id/0/1230/500'
},
{
title: 'Slide 2',
image: 'https://picsum.photos/id/1/1230/500'
},
{
title: 'Slide 3',
image: 'https://picsum.photos/id/2/1230/500'
},
{
title: 'Slide 4',
image: 'https://picsum.photos/id/3/1230/500'
},
{
title: 'Slide 5',
image: 'https://picsum.photos/id/4/1230/500'
},
{
title: 'Slide 6',
image: 'https://picsum.photos/id/5/1230/500'
},
{
title: 'Slide 7',
image: 'https://picsum.photos/id/6/1230/500'
},
{
title: 'Slide 8',
image: 'https://picsum.photos/id/7/1230/500'
}
]
}
}
}
</script>
# Custom With Card
Slide 1
@johnsmith
4.4
Slide 2
@johnsmith
3.5
Slide 3
@johnsmith
5
Slide 4
@johnsmith
Slide 5
@johnsmith
5
Slide 6
@johnsmith
4
Slide 7
@johnsmith
2.7
Slide 8
@johnsmith
1.5
<template>
<b-carousel-list v-model="test" :data="items" :items-to-show="2">
<template slot="item" slot-scope="props">
<div class="card">
<div class="card-image">
<figure class="image is-5by4">
<a @click="info(props.index)"><img :src="props.list.image"></a>
</figure>
<b-tag type="is-danger" rounded style="position: absolute; top: 0;"><b>50%</b></b-tag>
</div>
<div class="card-content">
<div class="content">
<p class="title is-6">{{ props.list.title }}</p>
<p class="subtitle is-7">@johnsmith</p>
<div class="field is-grouped" >
<p class="control" v-if="props.list.rating">
<b-rate :value="props.list.rating" show-score disabled/>
</p>
<p class="control" style="margin-left: auto">
<button class="button is-small is-danger is-outlined"><b-icon size="is-small" icon="heart"/></button>
</p>
</div>
</div>
</div>
</div>
</template>
</b-carousel-list>
</template>
<script>
export default {
data() {
return {
test: 0,
items: [
{
title: 'Slide 1',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 4.4
},
{
title: 'Slide 2',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 3.5
},
{
title: 'Slide 3',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 5
},
{
title: 'Slide 4',
image: 'https://buefy.org/static/img/placeholder-1280x960.png'
},
{
title: 'Slide 5',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 5
},
{
title: 'Slide 6',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 4
},
{
title: 'Slide 7',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 2.7
},
{
title: 'Slide 8',
image: 'https://buefy.org/static/img/placeholder-1280x960.png',
rating: 1.5
}
]
}
},
methods: {
info(value) {
this.test = value
}
}
}
</script>
# Custom as an indicators
With Breakpoint and Switch like a Gallery.
<template>
<b-carousel
:autoplay="false"
with-carousel-list
:indicator="false"
:overlay="gallery">
<b-carousel-item v-for="(item, i) in items" :key="i">
<figure @click="switchGallery(true)" class="image">
<img :src="item.image">
</figure>
</b-carousel-item>
<span v-if="gallery" @click="switchGallery(false)" class="modal-close is-large"/>
<template slot="list" slot-scope="props">
<b-carousel-list
v-model="props.active"
:data="items"
:config="al"
:refresh="gallery"
@switch="props.switch($event, false)"
as-indicator />
</template>
<template slot="overlay">
<div class="has-text-centered has-text-white">
Hello i'am overlay!
</div>
</template>
</b-carousel>
</template>
<script>
export default {
data() {
return {
gallery: false,
al: {
hasGrayscale: true,
itemsToShow: 2,
breakpoints: {
768: {
hasGrayscale: false,
itemsToShow: 4
},
960: {
hasGrayscale: true,
itemsToShow: 6
}
}
},
items: [
{
title: 'Slide 1',
image: 'https://picsum.photos/id/0/1230/500'
},
{
title: 'Slide 2',
image: 'https://picsum.photos/id/1/1230/500'
},
{
title: 'Slide 3',
image: 'https://picsum.photos/id/2/1230/500'
},
{
title: 'Slide 4',
image: 'https://picsum.photos/id/3/1230/500'
},
{
title: 'Slide 5',
image: 'https://picsum.photos/id/4/1230/500'
},
{
title: 'Slide 6',
image: 'https://picsum.photos/id/5/1230/500'
},
{
title: 'Slide 7',
image: 'https://picsum.photos/id/6/1230/500'
},
{
title: 'Slide 8',
image: 'https://picsum.photos/id/7/1230/500'
}
]
}
},
methods: {
switchGallery(value) {
this.gallery = value
if (value) {
return document.documentElement.classList.add('is-clipped')
} else {
return document.documentElement.classList.remove('is-clipped')
}
}
}
}
</script>
# API
Carousel
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Number | — | 0 |
animated | Transition effect | String | fade, slide | slide |
interval | Interval of the autoplay, in milliseconds | Number | — | 3500 |
has-drag | Toggle touch dragging, when touch not detected. auto switch mouse dragging | Boolean | — | true |
autoplay | Whether automatically loop the slides | Boolean | — | true |
pause-hover | Pause carousel when autoplay and mouse enter | Boolean | — | true |
pause-info | Show infomation pause when autoplay and mouse enter | Boolean | — | true |
pause-info-type | Type (color) of the pause-info, optional | String | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | is-white |
pause-text | Text when pause | String | — | Pause |
arrow | Display the "next" and "prev" action | Boolean | — | true |
arrow-both | Display the "next" and "prev" action when first or last item | Boolean | — | true |
arrow-hover | Display the "next" and "prev" action when hover, but hidden on mobile | Boolean | — | true |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fab, fad, fal | mdi |
icon-size | Arrow icon size, optional | String | is-small, is-medium, is-large | — |
icon-prev | Icon to use for previous arrow | String | — | chevron-left |
icon-next | Icon to use for next arrow | String | — | chevron-right |
indicator | Display the indicator for jumping to specific item | Boolean | — | true |
indicator-background | Added background for indicator | Boolean | — | false |
indicator-custom | use when the image is more than 6 so that the indicator is not too small | Boolean | — | false |
indicator-custom-size | image size on the indicator when the indicator-custom is used | String | is-small, is-medium | is-small |
indicator-inside | Display the indicator inside on carousel | Boolean | — | true |
indicator-mode | Trigger for action indicator | String | click, hover | click |
indicator-position | Position indicator only when indicator-inside | String | is-bottom, is-top | is-bottom |
indicator-style | Style for indicator of carousel | String | is-boxes, is-dots, is-lines | is-dots |
overlay | Switch like a gallery | Boolean | — | false |
progress | Display the progress item of carousel | Boolean | — | false |
progress-type | Type (color) of the progress, optional | String | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | is-primary |
with-carousel-list | use this when indicator custom with b-carousel-list | Boolean | — | false |
Carousel List
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Number | — | 0 |
data | Carousel-list data | Array | — | — |
config | An object to pass all configs | Object | — | — |
has-drag | Toggle touch dragging, when touch not detected. auto switch mouse dragging | Boolean | — | true |
has-grayscale | Give a effect grayscale on img | Boolean | — | false |
has-opacity | Give a effect opacity on img | Boolean | — | false |
repeat | Back to value 0 when item active same with total data | Boolean | — | false |
items-to-show | count of items to showed per view (support a decimal). | Number | — | true |
items-to-list | count of items to list when use navigation buttons | Number | 1-5 | 1 |
as-indicator | Switch mode to indicator for carousel | Boolean | — | false |
refresh | Refresh for overlay carousel | Boolean | — | false |
arrow | Display the "next" or "prev" action when first or last item | Boolean | — | true |
arrow-hover | Display Arrow action when hover, but hidden on mobile | Boolean | — | true |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fab, fad, fal | mdi |
icon-size | Arrow icon size, optional | String | is-small, is-medium, is-large | — |
icon-prev | Icon to use for previous arrow | String | — | chevron-left |
icon-next | Icon to use for next arrow | String | — | chevron-right |
# Variables
You can use these variables to customize this component.
Name | Description | Default |
|---|---|---|
$carousel-min-height | The carousel default height before image loaded | 120px |
$carousel-arrow-background | The carousel arrow background | $white |
$carousel-arrow-color | The carousel color border | $primary |
$carousel-arrow-icon-spaced | The carousel arrow icon spaced left and right | 1.5rem |
$carousel-arrow-top | The carousel position by top | 50% |
$carousel-indicator-background | The carousel indicator background | rgba($black, 0.45) |
$carousel-indicator-border | The carousel indicator color border | $primary |
$carousel-indicator-color | The carousel indicator background | $white |
$carousel-indicator-spaced | The carousel indicator spaced | .5rem |
$carousel-overlay-background | The carousel background when overlay | rgba($black, 0.86) |
$carousel-overlay-z | The carousel z-index for overlay | 40 |
This page is open source. Noticed a typo or something's unclear?