Make carousel in vue with vue-carousel

image-source
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 https://github.com/SSENSE/vue-carousel
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.
npm install -S vue-carousel

and then you must registered vue carousel in main.js

import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel) ;

import VueCarousel from 'vue-carousel' ; Import the vue-carousel and then used then carousel Vue.use(VueCarousel) ;

How to Implement it ?

We have imported and registered it. now we will implement it. I have created one component that I named parentComponents.vue . this is the code.

<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>
(html comment removed:  Add "scoped" attribute to limit CSS to this component only )
<style scoped>
.wrapper-parent{
  width: auto;
}
</style>

import { Carousel, Slide } from 'vue-carousel' ; : Import the 'vue-carousel' in local component. and we import two components inside the vue carousel are Carousel and Slide.

  components: {
    Carousel,
    Slide
  }

We registered the components we have imported. and then we can use it in the components. the structure default given by Vue carousel . its like this.

< carousel >
< slide >
    Slide 1 Content
< /slide >
< slide >
    Slide 2 Content
< /slide >
< /carousel >

We can costume the structure. and in this tutorial . i will make 5 image as example.

< 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" >


< img src=" ../assets/image-7.jpeg " >
< /slide >
< /carousel >

paginationActiveColor =" #73c000 " : its to set your color dot paginations. autoplayTimeout:1000 : its to set auto play , you can add the time in second with type integer. You can add any element in the < slide >< /slide > .

The Result of code

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

---

Posted on Utopian.io - Rewarding Open Source Contributors

---