Add Slides to a Vue App with the Vueper Slides Library
Tags: vue, webdev, programming, javascript
Published: 2021-01-20 23:29:18

**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.