Vueper Slides Library — 3d Rotation and External Controls

Image for post
Image for post
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 @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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store