DEV Community

loading...

Add Slides to a Vue App with the Vueper Slides Library

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide