Add a Slider to a Vue App with the vue-owl-carousel Library
Tags: vue, webdev, programming, javascript
Published: 2021-01-20 23:28:55

**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](https://owlcarousel2.github.io/OwlCarousel2/demos/events.html) 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.