Vueper Slides Library — Customize Slides
Tags: vue, javascript, programming, webdev
Published: 2021-01-20 23:29:43

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

### Fractions and Progress

We can show the progress of the slide with the `fractions` and `progress` props:

```
<template>
  <div id="app">
    <vueper-slides fractions progress>
      <vueper-slide v-for="i in 10" :key="i" :title="i.toString()"/>
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide }
};
</script>
```

We’ll see a progress bar displayed.

### Images and Fading

We can add images and fading effects in our slides with the `image` prop:

```
<template>
  <div id="app">
    <vueper-slides fade :touchable="false">
      <vueper-slide
        v-for="(slide, i) in slides"
        :key="i"
        :image="slide.image"
        :title="slide.title"
        :content="slide.content"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide },
  data() {
    return {
      slides: Array(5)
        .fill()
        .map((_, i) => ({
          title: `title ${i}`,
          content: `content ${i}`,
          image: `https://picsum.photos/id/${i + 1}/400/300`
        }))
    };
  }
};
</script>
```

We set the `image` prop to the URL for our images.

Also, we added the fade effect with the `fade` prop.

`touchable` is set to `false` to disable changing slides with touch.

### Lazy Loading

We can lazy load our slides with the `lazy` and `lazy-load-on-drag` props.

Then we populate the `loader` slot with the loading indicator of our choice:

```
<template>
  <div id="app">
    <vueper-slides lazy lazy-load-on-drag>
      <vueper-slide
        v-for="(slide, i) in slides"
        :key="i"
        :image="slide.image"
        :title="slide.title"
        :content="slide.content"
      />
      <template v-slot:loader>
        <span>Loading...</span>
      </template>
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide },
  data() {
    return {
      slides: Array(5)
        .fill()
        .map((_, i) => ({
          title: `title ${i}`,
          content: `content ${i}`,
          image: `https://picsum.photos/id/${i + 1}/400/300`
        }))
    };
  }
};
</script>
```

### Link on the Whole Slide

We can make the slides have links with the `link` prop.

For example, we can write:

```
<template>
  <div id="app">
    <vueper-slides lazy lazy-load-on-drag>
      <vueper-slide
        v-for="(slide, i) in slides"
        :key="i"
        :image="slide.image"
        :title="slide.title"
        :content="slide.content"
        :link="slide.image"
      />
      <template v-slot:loader>
        <span>Loading...</span>
      </template>
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide },
  data() {
    return {
      slides: Array(5)
        .fill()
        .map((_, i) => ({
          title: `title ${i}`,
          content: `content ${i}`,
          image: `https://picsum.photos/id/${i + 1}/400/300`
        }))
    };
  }
};
</script>
```

We just set the `link` prop to the URL we want. Then we can click on the slide to go to the URL.

### Complex Slide Title and Content

We can populate the `content` slot to populate the content of the slides:

```
<template>
  <div id="app">
    <vueper-slides lazy lazy-load-on-drag>
      <vueper-slide v-for="i of 10" :key="i">
        <template v-slot:content>Complex content {{i}}</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 }
};
</script>
```

We can add anything we want into our slides.

### Conclusion

Vueper Slides is a very useful Vue carousel library that has many customization options.