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
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @alfarisi94 I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x