John Au-YeungCheck 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.
