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 - Basic image.

Slide 1

<template>
    <b-carousel indicators>
        <section
            v-for="(carousel, i) in carousels"
            :class="`hero is-medium is-${carousel.color}`"
            :key="i">
            <div class="hero-body has-text-centered">
                <h1 class="title">{{ carousel.text }}</h1>
            </div>
        </section>
    </b-carousel>
</template>

<script>
export default {
    data(){
        return {
            carousels: [
                { text: 'Slide 1', color: 'primary' },
                { text: 'Slide 2', color: 'mix' },
                { text: 'Slide 3', color: 'info' },
                { text: 'Slide 4', color: 'success' },
                { text: 'Slide 5', color: 'warning' },
                { text: 'Slide 6', color: 'danger' }
            ]
        }
    }
}
</script>

Custom

<template>
    <section>
        <div class="p-3">
            <b-field grouped group-multiline position="is-centered">
                <div class="control">
                    <b-switch v-model="autoPlay">Autoplay</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="fade">Fade</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="pauseHover" :disabled="!autoPlay">Pause on hover</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="pauseInfo" :disabled="!pauseHover">Pause info</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="drag">Drag event</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="repeat" :disabled="!autoPlay">Repeat</b-switch>
                </div>
            </b-field>
            <b-field grouped group-multiline position="is-centered">
                <b-field label="Interval">
                    <b-numberinput v-model="interval" min="0" controls-position="compact" step="500" :disabled="autoPlay"/>
                </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
            :autoplay="autoPlay"
            :interval="interval"
            :has-drag="drag"
            :fade="fade"
            :pause-hover="pauseHover"
            :pause-info="pauseInfo"
            :pause-info-type="pauseType">
            <section
                v-for="(carousel, i) in carousels" :key="i"
                :class="`hero is-medium is-${carousel.color}`">
                <div class="hero-body has-text-centered">
                    <h1 class="title">{{carousel.title}}</h1>
                </div>
            </section>
        </b-carousel>
    </section>
</template>

<script>
export default {
    data() {
        return {
            drag: false,
            fade: true,
            autoPlay: false,
            pauseHover: false,
            pauseInfo: false,
            pauseType: 'is-primary',
            repeat: false,
            interval: 3500,
            carousels: [
                { title: 'Slide 1', color: 'dark' },
                { title: 'Slide 2', color: 'primary' },
                { title: 'Slide 3', color: 'danger' },
                { title: 'Slide 4', color: 'warning' },
                { title: 'Slide 5', color: 'success' },
                { title: 'Slide 6', color: 'info' }
            ]
        }
    },
    methods: {
        info(value) {
            this.carousel = value
            this.$buval.toast.open({
                message: `This Slide ${value} !`,
                type: 'is-info'
            })
        }
    }
}
</script>

Multiple Show

Drag event

Repeat

Infinite

Items to List

<template>
    <section>
        <div class="example-component">
            <b-field grouped group-multiline position="is-centered">
                <div class="control">
                    <b-switch v-model="drag">Drag event</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="repeat" :disabled="infinite">Repeat</b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="infinite" :disabled="repeat">Infinite</b-switch>
                </div>
            </b-field>
            <b-field grouped group-multiline position="is-centered">
                <b-field label="Items to List">
                    <b-numberinput v-model="perList" min="1" :max="carousels.length - 1" controls-position="compact"/>
                </b-field>
            </b-field>
        </div>
        <b-carousel
            focus-on-select
            :infinite="infinite"
            :items-to-show="perShow"
            :items-to-scroll="perList">
            <div class="image" v-for="(carousel, i) in carousels" :key="i">
                <img :src="carousel.image" />
            </div>
        </b-carousel>
    </section>
</template>

<script>
export default {
    data() {
        return {
            arrow: true,
            arrowHover: true,
            drag: true,
            gray: false,
            opacity: false,
            values: 1,
            perShow: 3,
            perList: 1,
            repeat: false,
            infinite: false,
            carousels: [
                {
                    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>

Multiple Rows

Rows

Items Per Row

Slide 1

Slide 2

<template>
    <section>
        <div class="example-component">
            <b-field grouped group-multiline position="is-centered">
                <b-field label="Rows">
                    <b-numberinput v-model="rows" min="1" :max="(carousels.length / 2)" controls-position="compact"/>
                </b-field>
                <b-field label="Items Per Row">
                    <b-numberinput v-model="itemsPerRow" min="1" :max="(carousels.length / rows)" controls-position="compact"/>
                </b-field>
            </b-field>
        </div>
        <b-carousel
            :rows="rows"
            :items-per-row="itemsPerRow">
            <section
                v-for="(carousel, i) in carousels"
                :class="`hero is-medium is-${carousel.color}`"
                :key="i">
                <div class="hero-body has-text-centered">
                    <h1 class="title">{{carousel.text}}</h1>
                </div>
            </section>
        </b-carousel>
    </section>
</template>

<script>
export default {
    data() {
        return {
            rows: 2,
            itemsPerRow: 1,
            carousels: [
                { text: 'Slide 1', color: 'primary' },
                { text: 'Slide 2', color: 'mix' },
                { text: 'Slide 3', color: 'info' },
                { text: 'Slide 4', color: 'success' },
                { text: 'Slide 5', color: 'warning' },
                { text: 'Slide 6', color: 'danger' },
                { text: 'Slide 7', color: 'light' },
                { text: 'Slide 8', color: 'dark' },
                { text: 'Slide 9', color: 'dark' },
                { text: 'Slide 10', color: 'dark' },
                { text: 'Slide 11', color: 'dark' },
                { text: 'Slide 12', color: 'dark' }
            ]
        }
    }
}
</script>

Navbar

Slide 1

Slide 5

Slide 6

Slide 7

Slide 8

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 1

Slide 2

Slide 3

Slide 4

<template>
    <section>
        <b-carousel
            indicators
            :infinite="false"
            fade
            group="gallery">
            <section
                v-for="(carousel, i) in carousels"
                :class="`hero is-medium is-${carousel.color}`"
                :key="i">
                <div class="hero-body has-text-centered">
                    <h1 class="title">{{carousel.text}}</h1>
                </div>
            </section>
        </b-carousel>
        <b-carousel
            bordered
            border-size="is-small"
            :infinite="true"
            :center-mode="true"
            :items-to-show="5"
            focus-on-select
            group="gallery">
            <section
                v-for="(carousel, i) in carousels"
                :class="`hero is-${carousel.color}`"
                :key="i">
                <div class="hero-body has-text-centered">
                    <h1 class="title">{{carousel.text}}</h1>
                </div>
            </section>
        </b-carousel>
    </section>
</template>

<script>
// @afterChange="($refs.c2.goTo($event.currentItem))
export default {
    data(){
        return {
            carousels: [
                { text: 'Slide 1', color: 'primary' },
                { text: 'Slide 2', color: 'mix' },
                { text: 'Slide 3', color: 'info' },
                { text: 'Slide 4', color: 'success' },
                { text: 'Slide 5', color: 'warning' },
                { text: 'Slide 6', color: 'danger' },
                { text: 'Slide 7', color: 'dark' },
                { text: 'Slide 8', color: 'light' }
            ]
        }
    }
}
</script>

Carousel List

aLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<template>
    <b-carousel :focus-on-select="false" :items-to-show="2" :rows="2" :items-per-row="2">
        <div class="card is-shadowless is-border" v-for="(i) in 12" :key="i">
            <a href="https://google.com">
            <div class="card-image">
                <figure class="image is-4by3">
                <img src="/static/img/placeholders/1280x960.png" alt="Placeholder image">
                </figure>
            </div>
            <div class="card-content">
                aLorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus nec iaculis mauris.
            </div>
            </a>
        </div>
    </b-carousel>
</template>

<script>
export default {
    data() {
        return {
            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>

API

Carousel

Name	Description	Type	Value	Default
`autoplay`	Automatically playing the item	Boolean	—	`false`
`interval`	Interval of the `autoplay`, in milliseconds	Number	—	`3500`
`breakpoints`	Settings objects from breakpoints, enables settings sets at given screen width	Object	—	`—`
`fade`	Enables fade. with note: `items-to-show`, `items-per-row` as 1 not more	Boolean	—	`false`
`focus-on-select`	Go to item on click	Boolean	—	`false`
`infinite`	Enable infinite scrolling mode	Boolean	—	`false`
`initial-item`	Item index to start on	Number	—	`0`
`items-to-scroll`	Number of items to Scrolling	Number	—	`1`
`items-to-show`	Number of items to showing per view (support a decimal)	Number	—	`1`
`rows`	Enables grid, number of rows per item in the carousel	Number	—	`1`
`items-per-row`	Number of items to display in grid mode, this is useful with rows options	Number	—	`1`
`pause-hover`	Pause carousel when autoplay and mouse enter	Boolean	—	`true`
`pause-info`	Display infomation pause when autoplay and mouse enter	Boolean	—	`true`
`arrows`	Display the icon as change action for next and previous"	Boolean	—	`true`
`arrow-hover`	Display the "next" and "prev" action when hover	Boolean	—	`true`
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fab`, `fad`, `fal`	`fa`
`icon-size`	Arrow icon size, optional	String	`is-small`, `is-medium`, `is-large`	`—`
`icon-prev`	pause `autoplay` if the mouse enters the slide.	String	—	`chevron-left`
`icon-next`	Icon to use for next arrow	String	—	`chevron-right`
`indicators`	Display the indicator for jumping to specific item	Boolean	—	`false`
`indicator-inside`	Display the indicator inside on carousel	Boolean	—	`true`
`indicator-mode`	Trigger for action indicator	String	`click`, `hover`	`click`
`indicator-style`	Style for indicator of carousel	String	`is-boxs`, `is-dots`, `is-lines`	`is-dots`

Name slot	Description	Props (if no)
`indicators`	Custom indicators	`index: Number`

Name	Description	Parameters
`change`	Triggers when carousel item value is changed	`value: Boolean\|Number\|String`
`input`	Triggers when `indicator-mode` value is changed	`value: Boolean`, `value: String`

Name	Description	Parameters	Return
`goTo`	Go to item index	`value: Number`	—
`goNext`	Go to the next item	—	—
`goPrev`	Go to the previous item	—	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Description	Default
`$carousel-speed`	The carousel arrow background	`300ms`
`$carousel-arrow-background`	The carousel arrow background	`$white`
`$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`