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.
