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 Vueper Slides 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 vueperslides package by running:

npm i --S vueperslides

Also, we can include the script tag and CSS for the library:

<head>
  //...
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vueperslides"></script>
  <link href="https://unpkg.com/vueperslides/dist/vueperslides.css" rel="stylesheet">
</head>

Add a Carousel

Once we installed the package, we can add a carousel by writing:

<template>
  <div id="app">
    <vueper-slides>
      <vueper-slide
        v-for="i of 10"
        :key="i"
        :title="`title ${i.toString()}`"
        :content="`slide ${i.toString()}`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

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

We import the packages and the CSS to add the slider.

The vueper-slides component is the carousel container.

vueper-slide has the slides.

The title prop has the slide title.

content has the slide content.

We can also make the slides autoplay with the autoplay prop:

<template>
  <div id="app">
    <vueper-slides autoplay>
      <vueper-slide
        v-for="i of 10"
        :key="i"
        :title="`title ${i.toString()}`"
        :content="`slide ${i.toString()}`"
      />
      <template v-slot:pause>pause</template>
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

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

We populate the pause slot to add a pause button.

Also, we can add the style prop to add the styles.

For example, we can write:

<template>
  <div id="app">
    <vueper-slides autoplay>
      <vueper-slide
        v-for="i of 10"
        :key="i"
        :title="`title ${i.toString()}`"
        :content="`slide ${i.toString()}`"
        :style="`background-color: ${colors[i % colors.length]}`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide },
  data() {
    return {
      colors: ["red", "green", "blue"]
    };
  }
};
</script>

We can set the background color of the slides with the style prop.

Custom Arrows and Bullets

We can change the colors of the bullet with our own styles.

For example, we can write:

<template>
  <div id="app">
    <vueper-slides>
      <vueper-slide
        v-for="i of 10"
        :key="i"
        :title="`title ${i.toString()}`"
        :content="`slide ${i.toString()}`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

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

<style>
.vueperslides__bullet .default {
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: none;
  transition: 0.3s;
  width: 16px;
  height: 16px;
}

.vueperslides__bullet--active .default {
  background-color: #42b983;
}

.vueperslides__bullet span {
  display: block;
  color: #fff;
  font-size: 10px;
  opacity: 0.8;
}
</style>

to set the bullet styles by setting the .vueperslides__bullet span class.

We can also populate the bullet slot with our own bullet:

<template>
  <div id="app">
    <vueper-slides>
      <vueper-slide
        v-for="i of 10"
        :key="i"
        :title="`title ${i.toString()}`"
        :content="`slide ${i.toString()}`"
      />
      <template v-slot:bullet="{ active, slideIndex, index }">{{ active ? '&ofcir;' : '&olcir;' }}</template>
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

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

active indicates whether the slide is active or not.

slideIndex has the slide index.

Conclusion

The Vueper Slides library lets us add slides to a Vue app easily.

Add Slides to a Vue App with the Vueper Slides Library

Installation

Add a Carousel

Custom Arrows and Bullets

Conclusion