Vueper Slides Library — 3d Rotation and External Controls
Tags: vue, webdev, programming, javascript
Published: 2021-01-20 23:31:16

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

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