Carousel

A Slideshow for cycling images in confined spaces

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.

<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="!autoPlay">Pause info</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>
        </div>

        <b-carousel
            v-model="carousel"
            :animated="animated"
            :autoplay="autoPlay"
            :pause-hover="pauseHover"
            :pause-info="pauseInfo"
            :interval="interval">
            <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',
            autoPlay: false,
            pauseHover: false,
            pauseInfo: false,
            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' }
            ]
        }
    }
}
</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="Arrow Icon Pack">
                    <b-input v-model="iconPack" placeholder="e.g. mdi, fa or other"/>
                </b-field>
                <b-field label="Arrow 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="Arrow Icon Prev">
                    <b-input v-model="iconPrev"/>
                </b-field>
                <b-field label="Arrow 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>

# Indicator

<template>
    <section>
        <div class="columns is-mobile is-centered is-multiline" style="padding-top:1.5rem">
            <div class="column is-narrow">
                <b-field>
                <b-switch v-model="indicator"><strong>Indicator</strong></b-switch>
                </b-field>
                <b-field>
                <b-switch v-model="indicatorInside" :disabled="!indicator">Inside</b-switch>
                </b-field>
            </div>
            <div class="column is-narrow">
                <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>
            </div>
            <div class="column is-narrow">
                <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>
            </div>
        </div>

        <b-carousel
            :indicator="indicator"
            :indicator-inside="indicatorInside"
            :indicator-mode="indicatorMode"
            :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,
            indicatorInside: true,
            indicatorMode: 'hover',
            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>

# Custom Indicators

Source by Picsum Images from Unsplash.
<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>

# API

Carousel

Name
Description
Type
Values
Default
v-modelBinding value Number 0
animatedTransition effect String fade, slideslide
intervalInterval of the autoplay, in milliseconds Number 3000
autoplayWhether automatically loop the slides Boolean true
pause-hoverPause carousel when autoplay and mouse enter Boolean true
pause-infoShow infomation pause when autoplay and mouse enter Boolean true
arrow Display the "next" and "prev" action Boolean true
arrow-bothDisplay the "next" and "prev" action when first or last item Boolean true
arrow-hoverDisplay the "next" and "prev" action when hover Boolean true
icon-packIcon pack to use String mdi, fa, fas, far, fab, fad, falmdi
icon-sizeArrow icon size, optional String is-small, is-medium, is-large
icon-prevIcon to use for previous arrow String chevron-left
icon-nextIcon to use for next arrow String chevron-right
indicatorDisplay the indicator for jumping to specific item Boolean true
indicator-insideDisplay the indicator inside on carousel Boolean true
indicator-modeTrigger for action indicator String click, hoverclick
indicator-styleStyle for indicator of carousel String is-boxs, is-dots, is-linesis-dots

# Variables

You can use these variables to customize this component.

Name
Description
Default
$carousel-arrow-backgroundThe carousel arrow background$white
$carousel-arrow-colorThe carousel color border$primary
$carousel-arrow-icon-spacedThe carousel arrow icon spaced left and right1.5rem
$carousel-arrow-topThe carousel position by top45%
$carousel-indicator-backgroundThe carousel indicator background$white
$carousel-indicator-borderThe carousel indicator color border$primary
$carousel-indicator-spacedThe carousel indicator spaced.5rem

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub