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.

Vueper Slides Library — Customize Slides