Tutorial
How to Create an Image Slider with Vue.js
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
As you know, Vue.js is one of the most popular progressive JavaScript frameworks and has many benefits compared with other frameworks. This tutorial will help you in creating a Vue image slider component from scratch without using additional 3rd party libraries.
Project Setup
If you haven’t done so already, before creating a new Vue.js project you should install the Vue CLI globally on your machine by doing the following:
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
Create a new project with the Vue CLI:
$ vue create vue-image-slider
$ cd vue-image-slider
Then run the serve
script to start a local server:
$ npm run serve
Our Vue.js project is now running successfully.
Creating the Slider Component
You may notice that there is a HelloWorld
component generated automatically. You can either rename that component to Slider
and make changes inside it or remove it and create a new Slider
component. However, in both cases be sure to import the right component inside App.vue
.
Let’s create a new Slider
component and add the following functionalities:
<template>
<h1>Heading</h1>
</template>
<script>
export default {
name: "Slider",
data() {
return {
images: [
"https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg",
"https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg",
"https://cdn.pixabay.com/photo/2015/05/15/14/27/eiffel-tower-768501_1280.jpg",
"https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg"
],
timer: null,
currentIndex: 0
};
},
mounted: function() {
this.startSlide();
},
methods: {
startSlide: function() {
this.timer = setInterval(this.next, 4000);
},
next: function() {
this.currentIndex += 1;
},
prev: function() {
this.currentIndex -= 1;
}
},
computed: {
currentImg: function() {
return this.images[Math.abs(this.currentIndex) % this.images.length];
}
}
};
</script>
Let’s look at what we did here:
- We got an array of image URLs from Pixabay.
- Set
timer
to null and setcurrentIndex
to 0 for showing the first image. - Created
startSlide
function for sliding images every 4 seconds. - Created
next
andprev
functions for sliding to the previous or the next image. According to the lastcurrentImg
function it detects which image must show at that time based on the index.
It’s time to add the markup/HTML part to the component:
<template>
<div>
<transition-group name="fade" tag="div">
<div v-for="i in [currentIndex]" :key="i">
<img :src="currentImg" />
</div>
</transition-group>
<a class="prev" @click="prev" href="#">❮ Previous</a>
<a class="next" @click="next" href="#">❯ Next</a>
</div>
</template>
Here we take advantage of the built-in transtion-group
component that comes with Vue.js, then iterate images and add the functions we created earlier.
To make this component look great we need to add some CSS styling to it:
.fade-enter-active,
.fade-leave-active {
transition: all 0.9s ease;
overflow: hidden;
visibility: visible;
position: absolute;
width:100%;
opacity: 1;
}
.fade-enter,
.fade-leave-to {
visibility: hidden;
width:100%;
opacity: 0;
}
img {
height:600px;
width:100%
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.7s ease;
border-radius: 0 4px 4px 0;
text-decoration: none;
user-select: none;
}
.next {
right: 0;
}
.prev {
left: 0;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.9);
}
As it was mentioned earlier we used the built-in transition-group
component from Vue.js which has ready-made class names like fade-enter-active
, fade-leave-active
, among others.
Making changes in App.vue
Let’s not forget to check App.vue
and import our Slider
component:
<template>
<div id="app">
<Slider />
</div>
</template>
<script>
import Slider from "./components/Slider.vue";
export default {
name: "app",
components: {
Slider
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
body {
margin: 0px;
}
</style>
That’s it! Our image slider is ready to be used! You can find the full source code on Github here.