Buefy — Carousels

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"…