Tutorial

How to Create an Image Slider with Vue.js

Published on July 23, 2019
Default avatar

By Hayk Yaghubyan

How to Create an Image Slider with Vue.js

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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 set currentIndex to 0 for showing the first image.
  • Created startSlide function for sliding images every 4 seconds.
  • Created next and prev functions for sliding to the previous or the next image. According to the last currentImg 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="#">&#10094; Previous</a>
    <a class="next" @click="next" href="#">&#10095; 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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Hayk Yaghubyan

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Hi! This was great, but I have adapted this for BG images. I cant find a way to animate the fading between images when this is used on background images? Any Ideas? Also, when I change my Div that has the background image swaps over to be a transition group, all of my other page content disappears and I only get the swapping images…

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel