![Flexible-Responsive-Carousel-Component-For-Vue.js.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514871080/bgrrxrmizv0xbvzgnpog.png)

<a href="https://i1.wp.com/www.vuescript.com/wp-content/uploads/2016/12/Flexible-Responsive-Carousel-Component-For-Vue.js.png?w=500">image-source</a>
This tutorial I will share the features that we often encounter in the web, and more often in use on the modern web. that feature is carousel. there are so many repositories that make the carousel, but after I browse. I think the best and most complete is <b>https://github.com/SSENSE/vue-carousel</b>
just start we start how to implement it.

## How to Install ?
How to install it is very easy, we can directly install via NPM in the following way.
<code>npm install -S vue-carousel</code>
![Screenshot_27.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514823257/tfpfqrvwdc0nqyjyh7vs.png (12 kB))
and then you must registered vue carousel in <b>main.js</b>
<pre><code>import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel) ;
</code>
</pre>
<code>import VueCarousel from 'vue-carousel' ;</code>  Import the vue-carousel and then used then carousel <code>Vue.use(VueCarousel) ;</code> 

## How to Implement it ?
We have imported and registered it. now we will implement it. I have created one component that I named <b>parentComponents.vue</b> . this is the code.
``` html
<template>
  <div class="wrapper-parent">
    <carousel paginationActiveColor="#73c000" paginationPadding=5 autoplayTimeout:1000>
      <slide>
          <img src="../assets/image-3.jpeg">
      </slide>
      <slide>
          <img src="../assets/image-6.jpeg">
      </slide>
      <slide>
          <img src="../assets/image-4.jpeg">
      </slide>
      <slide>
          <img src="../assets/image-5.jpeg">
      </slide>
       <slide>
          <img src="../assets/image-7.jpeg">
      </slide>
    </carousel>
  </div>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
   components: {
    Carousel,
    Slide
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper-parent{
  width: auto;
}
</style>
```
<br />
<code>import { Carousel, Slide } from 'vue-carousel' ;</code> : Import the 'vue-carousel' in local component. and we import two components inside the vue carousel are <b>Carousel</b> and <b>Slide</b>.
<pre><code>
  components: {
    Carousel,
    Slide
  }
</code>
</pre>
We registered the components we have imported. and then we can use it in the components. the structure default given by <b>Vue carousel</b> . its like this.
<pre><code>
< carousel >
< slide >
    Slide 1 Content
< /slide >
< slide >
    Slide 2 Content
< /slide >
< /carousel >
</code>
</pre>
We can costume the structure. and in this tutorial . i will make 5 image as example.
<pre><code>
< carousel paginationActiveColor="#73c000"  autoplayTimeout:1000 >
< slide >
< img src=" ../assets/image-3.jpeg " >
< /slide >
< slide >
< img src=" ../assets/image-6.jpeg " >
< /slide >
< slide >
< img src=" ../assets/image-4.jpeg " >
< /slide >
< slide >
< img src="../assets/image-5.jpeg" >
</slide>
<slide>
< img src=" ../assets/image-7.jpeg " >
< /slide >
< /carousel >
</code>
</pre>
<code>paginationActiveColor =" #73c000 " </code> : its to set your  color dot paginations.
<code>autoplayTimeout:1000</code> :  its to set auto play , you can add the time in second with type integer.  You can add any element in the <b> < slide >< /slide ></b> .

## The Result of code
![Screenshot_1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514870202/gpe4hjwb9d9ewzoprdp1.png)

![Screenshot_2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514870340/xyyavfzdfxhlpwehqood.png)

![Screenshot_28.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514870346/gvrbr8kgxkkfqjcall5g.png)
![Screenshot_29.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514870355/zem6ynzt8ybbjbynzxis.png)


These is the result of the carousel we have done. You can see other options options to customize. carousel you want. So many of you I hope this tutorial you get the benefit to build a carousel on your website. thank you

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/make-carousel-in-vue-with-vue-carousel">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>