Add a Slider to a Vue App with the vue-owl-carousel Library

#vue #webdev #programming #javascript

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.