Adding a Slideshow with to a Vue App with Vue Carousel

We can create a slideshow in our Vue app with the Vue Carousel library.

To install it, we run:

npm install -S vue-carousel

Then we register the plugin globally by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCarousel from "vue-carousel";
Vue.use(VueCarousel);

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

We can also register the components locally by writing:

import { Carousel, Slide } from 'vue-carousel';
export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

in the component.

Then we can write:

<template>
  <div id="app">
    <carousel>
      <slide>Slide 1 Content</slide>
      <slide>Slide 2 Content</slide>
    </carousel>
  </div>
</template>

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

We can change the number of slides per page by using the per-page prop.

And we can use the navgiationEnabled prop to enable navigation in our carousel.

For instance, we can write:

<template>
  <div id="app">
    <carousel :per-page="1" navigationEnabled>
      <slide>Slide 1 Content</slide>
      <slide>Slide 2 Content</slide>
    </carousel>
  </div>
</template>

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

Then we have one slide per page and navigation buttons.

We can also add autoplay with the autoplay prop. The autoplayTimeout to add the length of time that we wait before we move to the next slide.

There’s also the autoplayHoverPause boolean prop to let us pause the slides by hovering over a slide.

Vue Carousel is a package that makes creating slideshows easily.

It’s also very flexible.