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.
