To create a slideshow, we’ve got to create display images dynamically and add navigation buttons to navigate between them. We may need autoplay capabilities, too.
These all take time to build, and it’s exceedingly likely we could be better using that time doing something else. In this article, we’ll look at some carousel libraries for Vue.js to make our lives easier and give us back some of that precious time.
vue-easy-slider
vue-easy-slider is a simple Vue slider component that can be used with both mice and touch screens. It’s customizable and comes with animation effects.
To use it, we install it by running:
npm i -S vue-easy-slider
Then we can use it by writing:
//main.js
import Vue from "vue";
import App from "./App.vue";
import EasySlider from "vue-easy-slider";
Vue.use(EasySlider);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
//App.vue
<template>
<div id="app">
<slider animation="fade">
<slider-item v-for="(i, index) in list" :key="index">
<img :src="i">
</slider-item>
</slider>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
index: 0,
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`)
};
}
};
</script>
We use the slider component to add the carousel, and the animation prop sets the animation effect. As its name implies, slider-item holds the slider item.
We can also change the styles. For instance, we can change the width and height by writing:
<template>
<div id="app">
<slider animation="fade" width="400px" height="250px">
<slider-item v-for="(i, index) in list" :key="index">
<img :src="i">
</slider-item>
</slider>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
index: 0,
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`)
};
}
};
</script>
We can also enable or disable touch control and change the speed of the slide changes. It also emits a few events, like change, which fires when changing slides. next and previous fire when the next or previous slide is displayed.
It also has slots for the item placeholder to display something if a slide is loading.
vue-awesome-swiper
vue-awesome-swiper is another easy-to-use carousel component for Vue apps. It’s based on Swiper, so we’ve got to install that alongside the package:
npm install swiper vue-awesome-swiper --save
Then we can use it by writing:
//app.js
import Vue from "vue";
import App from "./App.vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";
Vue.use(VueAwesomeSwiper);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
//App.vue
<template>
<div id="app">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="(i, index) in list" :key="index">
<img :src="i">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`),
swiperOptions: {
pagination: {
el: ".swiper-pagination"
}
}
};
}
};
</script>
Here, we use the swiper component with some options. The swiper-slide component holds the slides, so we put our images inside it. We also pass the swiperOptions into the options prop.
We populate our content with the pagination slot, and we set a class for the pagination so that we can style it.
We can also go to a slide programmatically. This is one reason why we assigned a ref to the slider — to shift to the slide we want. For instance, we can write:
//App.js
<template>
<div id="app">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="(i, index) in list" :key="index">
<img :src="i">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`),
swiperOptions: {
pagination: {
el: ".swiper-pagination"
}
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
}
},
mounted() {
this.swiper.slideTo(2, 1000, false);
}
};
</script>
We created a computed property with the mySwiper ref we assigned to our slider, then we call the slideTo method to change to the slide with the given index. The index is in the first argument, the second argument is the delay, and the third argument indicates whether we want to run callbacks. If we set it to true, it’ll emit events during transitions.
Like vue-easy-slider, this carousel library also has animation effects.
Slick for Vue.js
The Slick for Vue.js library provides us with another slider. jQuery is a dependency, so we’ve got to install that as well. To install the dependencies, run:
npm install jquery vue-slick --save
Next, we can use it by writing:
//main.js
import Vue from "vue";
import App from "./App.vue";
import "slick-carousel/slick/slick.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
//App.vue
<template>
<slick ref="slick" :options="slickOptions">
<div v-for="(i, index) in list" :key="index">
<img :src="i">
</div>
</slick>
</template>
<script>
import Slick from "vue-slick";
export default {
components: { Slick },
data() {
return {
slickOptions: {
slidesToShow: 1
},
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`)
};
},
methods: {}
};
</script>
We register the plugin main.js and imported the CSS, then we use the slick component to create our carousel. We pass in our slickOptions object with the slidesToShow property set to 1 to show only one slide. The slides are created by using v-for to render the images.
Learn more →It emits many events:
- We can listen to the
afterChangeevent, which is emitted when the slides have changed beforeChangeis emitted before a slide changesdestroyis emitted when the slider is being unloadedswipeis fired when a swipe action is being performed- And many more
We can also call this.$refs.slick.reSlick(); to update our slides with the latest images if we change the image list.
vue-flickity
Next up is vue-flickity, which provides us with many customization options. To install it, we can run:
npm install vue-flickity --save
Let’s take a look at how to use it:
//App.vue
<template>
<div>
<flickity ref="flickity" :options="flickityOptions">
<div class="carousel-cell" v-for="(i, index) in list" :key="index">
<img :src="i">
</div>
</flickity>
<button @click="previous()">Previous</button>
<button @click="next()">Next</button>
</div>
</template>
<script>
import Flickity from "vue-flickity";
export default {
components: {
Flickity
},
data() {
return {
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true
},
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`)
};
},
methods: {
next() {
this.$refs.flickity.next();
},
previous() {
this.$refs.flickity.previous();
}
}
};
</script>
We use the flickity component to add our slider, and it’s customizable via the options prop. We use it to set the initial slide via the initialIndex property.
prevNextButton lets us show or hide the built-in navigation buttons, and we can choose whether we want to show the navigation dots with pageDots. wrapAround indicates that we go back to the first or last slide when we reach the end or start of the carousel, respectively.
We’ve also added some custom buttons for navigation. We created one for navigating to the previous slide and one for navigating to the next slide. ref gets the ref and lets us call the next or previous method to move to the next or previous slide, respectively.
We can style the carousel and slides with CSS. It adds the carousel to the carousel-cell class so we can style it. The built-in navigation buttons and dots also have their classes, which means we can style them without much trouble.
Vue Carousel 3D
Vue Carousel 3D is an interesting slider. It shows the slides in a 3D slideshow instead of in 2D. When we navigate through the slides, the slide being shown is created in front of the others, and it shows a rotating effect as we flip through the slides.
To install it, we run:
npm install -S vue-carousel-3d
To use it, we write:
//main.js
import Vue from "vue";
import App from "./App.vue";
import Carousel3d from "vue-carousel-3d";
Vue.use(Carousel3d);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
//App.vue
<template>
<div>
<carousel-3d>
<slide v-for="(i, index) in list" :key="index" :index="index">
<img :src="i">
</slide>
</carousel-3d>
</div>
</template>
<script>
export default {
data() {
return {
list: Array(5)
.fill()
.map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`)
};
}
};
</script>
We use the carousel-3d component to add the carousel, then we use the slide component to add the slides. We pass in the index so that the slides are positioned properly. The 3D styles are built in.
Other than that, it also has a few options for customization. We can:
- Enable or disable autoplay with the
autoplayprop - Change the bias, which is the bigger side when we have an even number of slides
- Set the carousel to loop infinitely
- Adjust the width and height
- Customize swipe distance and control width and height
Verdict and conclusion
Most of the libraries are quite similar, and Vue Carousel 3D is easily the most unique. The others are all 2D with similar customization options.
Their performance is similar, and they’re all fairly easy to use. All of them can be used on touch screens, and they all have animation effects.
Slick for Vue.js emits lots of events, so if we need to do things when slides change or anything like that, that’s likely the library we should choose. Slick for Vue.js is also useful if we want to display multiple slides per page.
Experience your Vue apps exactly how a user does
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps - Start monitoring for free.
