Vueper Slides Library — 3d Rotation and External Controls

Photo by Nick Fewings on Unsplash

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.

3D Rotation

We can add a 3d rotation effect when we change the slides with the 3d prop.

For example, we can write:

<template>
  <div id="app">
    <vueper-slides 3d fixed-height="300px" arrows-outside bullets-outside>
      <vueper-slide
        v-for="i in 9"
        :key="i"
        :title="i.toString()"
        :style="`background-color: ${colors[i % 2]}`"
      />
    </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: ["green", "red"]
    };
  }
};
</script>

Now we see a cube when we slide between 2 slides.

External Controls

We can add our own controls that are outside the slides itself:

<template>
  <div id="app">
    <button @click="$refs.slides.previous()">Previous</button>
    <button…