Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

With the vue-owl-carousel 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 the vue-owl-carousel library by running:

npm i vue-owl-carousel

Usage

Once we installed it, then we can use it by writing:

<template>
  <div id="app">
    <carousel>
      <img v-for="n of 10" :key="n" :src="`https://placeimg.com/200/200/any?${n}`">
    </carousel>
  </div>
</template>

<script>
import carousel from "vue-owl-carousel";

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

We import the component and then populate the carousel with images.

The carousel component is the carousel container.

It comes with navigation buttons and styles built-in.

Options

Various options are available as props.

items is the number of items we want to see on the screen. It defaults to 3.

margin is the margin-right of an item. It’s a number.

loop lets us set whether to loop through the items when we reach the end.

center sets whether to center our items. It’s a boolean value.

nav sets whether we want to show the navigation buttons. It’s a boolean value.

autoplay sets whether we want to make the carousel run automatically. It’s a boolean value.

autoplaySpeed sets the speed for autoplay. It’s a number.

rewind sets whether we want to go backward. It’s a boolean value.

mouseDrag sets whether we enable dragging slides with a mouse. It’s a boolean value.

touchDrag sets whether we enable dragging slides with touch. It’s a boolean value.

pullDrag sets whether we enable pulling slides. It’s a boolean value.

autoWidth and autoHeight lets us set whether to automatically size the carousel.

autoplayTimeout lets us set the autoplay interval. It’s a number.

autoplayHoverPause lets us pause on mouse hover. It’s a boolean value.

responsive lets us set the option for each slide. It’s an object.

For example, we can write:

<template>
  <div id="app">
    <carousel :responsive="responsive">
      <img v-for="n of 10" :key="n" :src="`https://placeimg.com/200/200/any?${n}`">
    </carousel>
  </div>
</template>

<script>
import carousel from "vue-owl-carousel";

export default {
  name: "App",
  components: { carousel },
  data() {
    return {
      responsive: { 0: { items: 1, nav: false }, 600: { items: 3, nav: true } }
    };
  }
};
</script>

The keys are the breakpoints and the values are objects that set how many items to show and whether to show the navigation controls.

Events

The carousel component emits the following events:

• initialize
• initialized
• resize
• resized
• refresh
• refreshed
• update
• updated
• drag
• dragged
• translate
• translated
• to
• changed

This document shows when they’re triggered.

Conclusion

The vue-owl-carousel library is an easy to use slider library for Vue apps based on Own Carousel.