How to Create a Simple Image Slider with vue-paginate in No Time
A few days ago, I have released a new plugin for VueJS called . As the name implies, it's a simple plugin that helps you use pagination on your data — if you're not familiar with it yet, check out the first and then come back (it should take no more than a couple of minutes).
While I was playing with the plugin, I realized that it can be also used to create a very simple image slider (if we can call it so) that might be useful for me (and for you) at some point later.
It's too basic. Not complex at all. It's the type of thing that you'd want to have in your site's sidebar; it's just a bunch of images that you can view using two buttons — next & previous.
As you'll see later in this tutorial, the whole process of adding that behavior won't take you more than 20 seconds!
Before we dive in, you might be first interested in seeing the end result.
Installing vue and vue-paginate
Let's start first by installing the dependencies for this project. All you have to do, after you create a new directory, is to run: npm install vue-paginate
This will install both vue and vue-paginate — since vue is a dependency for vue-paginate.
HTML, CSS, and a new vue instance
Now, let's build the basic structure of the demo, then after that we'll see how to make it work as an image slider.
So, let's start with our index.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple Image Slider</title>
<link rel="stylesheet" href="app.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
</head>
<body id="app">
<div class="container">
<ul class="image-slider">
<a class="control left-control" href="#">❮</a>
<li class="image-item" v-for="image in images">
<img class="image" :src="image.src">
<h3 class="image-title">{{ image.name }}</h3>
</li>
<a class="control right-control" href="#">❯</a>
</ul>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-paginate/vue-paginate.js"></script>
<script src="app.js"></script>
</body>
</html>
Next, we need to instantiate a new vue instance. We'll do this inside app.js.
new Vue({
el: '#app',
data: {
images: [
{ name: 'Food', src: 'http://lorempixel.com/300/300/food/' },
{ name: 'People', src: 'http://lorempixel.com/300/300/people/' },
{ name: 'Abstract', src: 'http://lorempixel.com/300/300/abstract/' },
{ name: 'Sports', src: 'http://lorempixel.com/300/300/sports/' },
]
}
});
And here's the CSS (inside app.css):
* { box-sizing: border-box; }
body, ul, li { margin: 0; padding: 0; }
.container {
height: 100vh;
}
.image-slider {
display: flex;
justify-content: center;
align-items: center;
}
.image-slider > * {
flex: 1;
}
.image-item {
list-style: none;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 2;
}
.image {
border-radius: 2px;
}
.control {
position: relative;
font-size: 150px;
text-decoration: none;
color: slategray;
opacity: 0.5;
transition: 0.4s opacity;
}
.control:hover {
opacity: 1.0;
}
.right-control {
left: 20px
}
.left-control {
left: -20px;
text-align: right;
}
.image-title {
margin: 0;
padding: 0;
text-align: center;
font-size: 40px;
color: silver;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
position: relative;
top: 10px;
}
Until now, we haven't done anything special — it's all basic stuff. Now, let's get this slider to work by using vue-paginate.
Getting it to work
First, we need to register our pagination using v-paginate directive. You can do this on any element you want, but it's usually better to use it as close as possible to the elements you'll work on. In this case, we'll use it on ul.image-slider, like this:
<ul v-paginate:1="images" class="image-slider">
So, we gave it the images data array and we told it to view only one element per page. (Because this is how most image sliders work — one image at a time.)
Next, we need to register our navigating methods on the control buttons. In this case, we'll use the next/prev methods instead of page numbers.
<a class="control left-control" @click="prevImagesPage()" href="#">❮</a>
// …
<a class="control right-control" @click="nextImagesPage()" href="#">❯</a>
That's it! Now, it should work as we want. However, I think it's a boring slider, isn't it? Let's make it more interesting by adding some animation.
Luckily, it's so easy with , which we've already imported at the top of our index.html.
All you have to do is to add animated plus any animation class you want on the li.image-item element (the one with v-for). For this example, we'll use the bouncing animation.
<li class="image-item animated bounceIn" v-for="image in images">
In closing
Before we close this tutorial, I'd like to remind you that this is the simplest image slider you'll ever want to have. It doesn't have any advanced features, and not all animations will work as you want; in these cases you'll need to consider using a more sophisticated library.
Nevertheless, I still think you'll need to have something as simple as this in one of your projects.
About Taha Shashtari
I'm a freelance web developer. Laravel & VueJS are my main tools these days and I love building stuff using them. I write constantly on this blog to share my knowledge and thoughts on things related to web development... Let's be friends on twitter.