Vueper Slides Library — 3d Rotation and External Controls

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 @click="$refs.slides.goToSlide(6 - 1)">Go to slide 6</button>
    <button @click="$refs.slides.next()">Next</button>
    <vueper-slides ref="slides">
      <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>

We assign a ref to the vueper-slides component so that we can call the methods that are included with the vueper-slides component.

previous is used to move to the previous slide.

goToSlide goes to the slide with the given index.

next goes to the next slide.

Sync 2 Instances

We can synchronize 2 carousels with Vueper Slides. To do that, we use the goToSlide method:

<template>
  <div id="app">
    <vueper-slides
      ref="vueperslides1"
      @slide="$refs.vueperslides2 && $refs.vueperslides2.goToSlide($event.currentSlide.index, { emit: false })"
      :slide-ratio="1 / 4"
      :bullets="false"
    >
      <vueper-slide
        v-for="i in 8"
        :key="i"
        :title="i.toString()"
        content="Navigation in sync"
        :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]"
      />
    </vueper-slides>

    <vueper-slides
      ref="vueperslides2"
      :slide-ratio="1 / 8"
      :dragging-distance="50"
      @slide="$refs.vueperslides1 && $refs.vueperslides1.goToSlide($event.currentSlide.index, { emit: false })"
      :visible-slides="3"
      fixed-height="100px"
    >
      <vueper-slide
        v-for="i in 8"
        :key="i"
        @click.native="$refs.vueperslides2 && $refs.vueperslides2.goToSlide(i - 1)"
      >
        <template v-slot:content>
          <div
            class="vueperslide__content-wrapper"
            :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]"
          >
            <div class="vueperslide__title">{{ i.toString() }}</div>
          </div>
        </template>
      </vueper-slide>
    </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>

We assign refs to both vueper-slides components. Then we listen to the slide event to listen for slide changes.

Then we can call goToSlide to on the other slide to change the slide.

emit set to false prevents the emission of the slide event when we call goToSlide .

This way, the slides for both carousels will be in sync.

Conclusion

We can synchronize 2 carousels with Vueper Slides.

Also, we can add 3d rotation effect and external controls for slides.