Vueper Slides Library — Updating Content
Tags: vue, javascript, webdev, programming
Published: 2021-01-20 23:30:32

**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.