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.
Updating Content Inside and Outside
We can update our slide content from the outside.
For example, we can write:
<template>
<div id="app">
<button @click="toggleSlidesTime">Keep updating time</button>
<vueper-slides :slide-ratio="1 / 4" autoplay :slide-content-outside="contentPosition">
<vueper-slide
v-for="(slide, i) in slides"
:key="i"
:style="`background-color: ${['green', 'red'][i % 2]}`"
>
<template v-slot:content>
<div class="vueperslide__content-wrapper" style="flex-direction: row">
<span>{{ slide.title }}</span>
</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: () => ({
slidesTimeTimerId: null,
slides: [{ title: "Time" }, { title: "Time" }]
}),
methods: {
toggleSlidesTime() {
if (this.slidesTimeTimerId) {
clearInterval(this.slidesTimeTimerId);
this.slidesTimeTimerId = 0;
} else {
this.updateSlidesWithTime();
this.slidesTimeTimerId = setInterval(this.updateSlidesWithTime, 1000);
}
},
updateSlidesWithTime() {
this.slides.forEach(slide => {
const time = new Date();
slide.title = time.toLocaleTimeString();
});
}
}
};
</script>
We have the toggleSlidesTime method to update title with the latest date and time.
The slides property is reactive, so the updates will be automatically reflected.
Add, Remove, and Disable Slides
We can add or remove slides by changing our slides array.
For example, we can write:
<template>
<div id="app">
<button @click="appendSlide">Add Slide</button>
<button @click="removeSlide">Remove Slide</button>
<button @click="toggleSlideshow">Toggle Slideshow</button>
<vueper-slides
:slide-ratio="0.2"
:infinite="false"
disable-arrows-on-edges
bullets-outside
:disable="slideshowDisabled"
>
<vueper-slide v-for="(slide, i) in slides" :key="i" :title="slide.title"/>
</vueper-slides>
</div>
</template>
<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
export default {
name: "App",
components: { VueperSlides, VueperSlide },
data: () => ({
slidesTimeTimerId: null,
slides: [{ title: "slide" }]
}),
methods: {
appendSlide() {
this.slides.push({
title: `slide`
});
},
removeSlide() {
this.slides.pop();
},
toggleSlideshow() {
this.slideshowDisabled = !this.slideshowDisabled;
}
}
};
</script>
to add the appendSlide method to add slides by calling push on the this.slides array.
removeSlide is a method to call pop to remove the last slide.
toggleSlideshow toggles the disable prop to toggling disabling the slides.
Center Mode
We can center our slides with some styles.
For example, we can write:
<template>
<div id="app">
<vueper-slides class="no-shadow" arrows-outside bullets-outside transition-speed="250">
<vueper-slide
v-for="i in 10"
:key="i"
:title="i.toString()"
:style="`background-color: ${['#ff5252', '#42b983'][i % 2]}`"
/>
</vueper-slides>
</div>
</template>
<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
export default {
name: "App",
components: { VueperSlides, VueperSlide }
};
</script>
<style>
.ex--center-mode {
width: 600px;
max-width: 100%;
margin: auto;
}
</style>
to center the slides.
We put the arrows outside the slide with the arrows-outside prop.
bullets-outside puts the bullets outside.
transition-speed changes the transition speed in milliseconds.
Conclusion
We can update our content in various ways with Vueper Slides Vue carousel component.
Top comments (0)