Create an Image Slider App with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an image slider with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create image-slider

and select all the default options to create the project.

Create the Image Slider

To create the image slider, we write:

<template>
  <div>
    <button @click="prev">&lt;</button>
    <img :src="image" />
    <button @click="next">&gt;</button>
  </div>
</template>

<script>
const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc",
];
export default {
  name: "App",
  data() {
    return { index: 0, image: images[0] };
  },
  methods: {
    next() {
      this.index = (this.index + 1) % images.length;
      this.image = images[this.index];
    },
    prev() {
      this.index = (this.index - 1) % images.length;
      this.image = images[this.index];
    },
  },
};
</script>

We create the button with < to show the less than symbol.

When we click it, it runs the prev method to move to the previous image.

The previous image is set by subtracting this.index by 1 and get the remainder of that when divided by images.length .

Likewise, we have the button with > to show the great than symbol.

When we click it, it runs the next method to move to the previous image.

The previous image is set by add 1 to this.index and get the remainder of that when divided by images.length .

To display the image, we have the img element with the src prop set to image , which has the URL of the selected image.

In the data method, we have image is set to images[0] to display the first image initially.

And we have the index set to 0 to keep the index in sync with image .

To make a slider that changes the image automatically, we write:

<template>
  <div>
    <img :src="image" />
  </div>
</template>

<script>
const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc",
];
export default {
  name: "App",
  data() {
    return { index: 0, image: images[0] };
  },
  methods: {
    next() {
      this.index = (this.index + 1) % images.length;
      this.image = images[this.index];
    },
    autoChangeSlide() {
      setInterval(() => {
        this.next();
      }, 1000);
    },
  },
  beforeMount() {
    this.autoChangeSlide();
  },
};
</script>

We call setInterval with a callback that calls this.next to move to the next slide every second as specified in the 2nd argument of setInterval .

Conclusion

We can create image slider app easily with Vue 3.