Image for post
Image for post
Photo by sept commercial on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Carousel Progress

We can show a progress bar on top of the carousel to indicate its progress.

For example, we can write:

<template>
<b-carousel progress progressType="is-primary">
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section>
<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" }, { text: "Slide 2" }, { text: "Slide 3" }]
};
}
};
</script>

to add the progress prop to enable the progress bar.

And progressType styles the progress bar.

Carousel Indicator

The carousel’s slide indicator can also be changed.

For example, we can write:

<template>
<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>
<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 {
indicator: true,
indicatorBackground: true,
indicatorInside: true,
indicatorMode: "hover",
indicatorPosition: "is-top",
indicatorStyle: "is-lines",
carousels: [{ text: "Slide 1" }, { text: "Slide 2" }, { text: "Slide 3" }]
};
}
};
</script>

to add the indicator prop to enable the slide indicator.

indicatorBackground enables the indicator background.

indicatorInside adds the indicator inside the carousel.

indicatorMode sets how to interact with the indicator to change the slides.

indicatorPosition sets the indicator position.

indicatorStyle sets the indicator style.

Custom Carousel Indicators

We can create our own carousel indicator by populating the indicators slot.

For example, we can write:

<template>
<b-carousel>
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section>
<div class="hero-body has-text-centered">
<h1 class="title">{{carousel.text}}</h1>
</div>
</section>
</b-carousel-item>
<template slot="indicators" slot-scope="props">
<span>{{props.i}}</span>
</template>
</b-carousel>
</template>
<script>
export default {
data() {
return {
carousels: [{ text: "Slide 1" }, { text: "Slide 2" }, { text: "Slide 3" }]
};
}
};
</script>

to add our own slide indicator by populating the indicators slot.

props.i has the index of the slide.

Custom Carousel With Card

We can add custom carousel with cards.

We can use the b-carousel-list component and populate the item slot with the card.

For example, we can write:

<template>
<b-carousel-list v-model="test" :data="items" :items-to-show="2">
<template slot="item" slot-scope="list">
<div class="card">
<div class="card-image">
<figure class="image is-5by4">
<a @click="info(list.index)">
<img :src="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">{{ list.title }}</p>
<p class="subtitle is-7">@abc</p>
<div class="field is-grouped">
<p class="control" v-if="list.rating">
<b-rate :value="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 {
items: [
{
title: "Slide 1",
image: "https://buefy.org/static/img/placeholder-1280x960.png",
rating: 4.5
},
{
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
}
]
};
},
methods: {
info(value) {
console.log(value);
}
}
};
</script>

We set the data prop to the items array so that we can set the data to the slides.

Inside the item slot, we have the figure with the image.

b-tag has the tag on the top left of the image.

The div with the card-content class has the content below the image.

b-rate has the rating stars.

Conclusion

There’re many ways to customize carousels with Buefy.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store