Vueper Slides Library — Updating Content

Image for post
Image for post
Photo by National Cancer Institute 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.

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.

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