How to create a slideshow / carousel in Vue.js?

There are plenty of ways to create an image carousel in Vue.js. And plenty of libraries too. Owl carousel has always been my pick when creating a slideshow on a static website. It is highly customisable, easy to use and has plenty of features. However, it’s a little difficult to integrate into Vue.js as it’s not really made for it. Luckily, we have a good alternative called Hooper.

To create a carousel with Hooper, you first need to install the library from NPM:

npm install hooper

Once done, you can now use hooper in whatever component of your application you want to. Here I’m going to write some template code as follows:

<template>
  <hooper :settings="hooperSettings">
    <slide class="np-slider np-slide-1"> Hi, </slide>
    <slide class="np-slider np-slide-2"> this is a slider demo</slide>
    <slide class="np-slider np-slide-3"> with background images </slide>
    <slide class="np-slider np-slide-4"> and customizable options. </slide>
    <slide class="np-slider np-slide-5"> www.nightprogrammer.com </slide>
    ...
  </hooper>
</template>
Code language: HTML, XML (xml)

You’d notice that I’ve added a prop called hooperSettings, this is where you can define any additional configuration to the slider such as:

Prop	Default	Description
itemsToShow	1	count of items to showed per view (can be a fraction).
itemsToSlide	1	count of items to slide when use navigation buttons.
initialSlide	0	index number of initial slide.
infiniteScroll	false	enable infinite scrolling mode.
centerMode	false	enable center mode.
vertical	false	enable vertical sliding mode.
rtl	null	enable rtl mode.
mouseDrag	true	toggle mouse dragging.
touchDrag	true	toggle touch dragging.
wheelControl	true	toggle mouse wheel sliding.
keysControl	true	toggle keyboard control.
shortDrag	true	enable any move to commit a slide.
autoPlay	false	enable auto sliding to carousel.
playSpeed	2000	speed of auto play to trigger slide in ms.
transition	300	sliding transition time in ms.
sync	”	sync two carousels to slide together.
hoverPause	true	pause autoPlay if the mouse enters the slide.
trimWhiteSpace	false	limit carousel to slide only when there will be no completely empty slide-space.
settings	{ }	an object to pass all settings.

Script to render the slider

You’d of course, also need some script code to initialise and render it:

import { Hooper, Slide } from "hooper";
import "hooper/dist/hooper.css";

export default {
  name: "App",
  data() {
    return {
      hooperSettings: {
        itemsToShow: 1,
      },
    };
  },
  components: {
    Hooper,
    Slide,
  },
};
Code language: JavaScript (javascript)

As you can see, on line number 9, I’ve decided to show only one slide at a time on the screen.

Finally, I’ve added some additional CSS to modify the look and feel of the slider:

.hooper {
  height: 100%;
  width: 800px;
}
.np-slider {
  border: 10px solid #000000;
  color: #ffffff;
  padding: 24px;
  font-size: 40px;
  height: 400px;
  width: 800px;
  text-shadow: 1px 1px 2px #000000;
  font-family: Arial, Helvetica, sans-serif;
}
.np-slide-1 {
  background: url("https://unsplash.it/800?random=1");
}
.np-slide-2 {
  background: url("https://unsplash.it/800?random=2");
}
.np-slide-3 {
  background: url("https://unsplash.it/800?random=3");
}
.np-slide-4 {
  background: url("https://unsplash.it/800?random=4");
}
.np-slide-5 {
  background: url("https://unsplash.it/800?random=5");
}
Code language: CSS (css)

You can find the complete working solution in my repos here:

Codesandbox | Github