DEV Community

loading...

Vueper Slides Library — Updating Content

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide