Add a Slider to a Vue App with the vue-agile Library

With the vue-agile library, we can add a carousel to our Vue app easily.

In this article, we’ll look at how to use it to add a carousel to our Vue app.

Installation

We can install it by running:

yarn add vue-agile

or

npm install vue-agile

The library doesn’t come with any styles so we’ll have to add them ourselves.

We can optionally add the CSS into the head tag in public/index.html by writing:

<link
  rel="stylesheet"
  href="https://unpkg.com/vue-agile/dist/VueAgile.css"
/>

Add a Carousel

Once we installed the package, we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueAgile from "vue-agile";

Vue.use(VueAgile);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <agile>
      <div class="slide" v-for="n of 10" :key="n">
        <h3>slide {{n}}</h3>
      </div>
    </agile>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We register the plugin in main.js .

Then we can use it in any component.

The agile component has the carousel container.

The divs are the slides.

Now we should see the slides with the navigation buttons at the bottom.

Responsive Slider

We can add many options in our slide, including adding breakpoints to make it responsive.

For example, we can write:

<template>
  <div id="app">
    <agile :options="options">
      <div class="slide" v-for="n of 10" :key="n">
        <h3>slide {{n}}</h3>
      </div>
    </agile>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: {
        navButtons: false,
        responsive: [
          {
            breakpoint: 600,
            settings: {
              dots: false
            }
          },
          {
            breakpoint: 900,
            settings: {
              navButtons: true,
              dots: true,
              infinite: false
            }
          }
        ]
      }
    };
  }
};
</script>

We have the options reactive property with the responsive property.

The breakpoint has the breakpoints that lets us decide what to show with a given breakpoint.

navButtons indicates whether we show the nav buttons or not.

dots lets us show the dots or not.

infinite indicates whether we want to loop through the items forever.

Custom Arrows and Nav Buttons

We can populate the prevButton and nexButton slots to add the buttons for going to the previous and next slides.

For example, we can write:

<template>
  <div id="app">
    <agile>
      <div class="slide" v-for="n of 10" :key="n">
        <h3>slide {{n}}</h3>
      </div>
      <template slot="prevButton">prev</template>
      <template slot="nextButton">next</template>
    </agile>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The content will be located inside the button as their content.

Caption

Also, we can populate the caption slot to add our own captions.

For example, we can write:

<template>
  <div id="app">
    <agile @after-change="e => currentSlide = e.currentSlide">
      <div class="slide" v-for="n of 10" :key="n">
        <h3>slide {{n}}</h3>
      </div>
      <template slot="caption">caption {{ currentSlide }}</template>
    </agile>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      currentSlide: 0
    };
  }
};
</script>

We listen to the after-change event emitted by agile to get the current slide with the currentSlide property.

Then we can populate the caption with it to show the current slide index in the caption.

Conclusion

The vue-agile library is a flexible and easy to use carousel library for Vue apps.