Vue JS carousel image Slider Example – Vuejs Image Slider
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vue JS carousel image Slider Example – Vuejs Image Slider
In this post we will show you Best way to implement Vuejs Image Slider Tutorial for Beginners, hear for How to image slider Vuejs code step by step For Beginners with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
index.html
[php]
Search Using FaceBook
We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials – “infinityknow.com”.
Search for the people
I create very Useful Advance FaceBook Search Please Feead Back ME
http://infinityknow.com/facebook-search/
[/php]
Javascript (js part)
[php]
const alllistimg = [
{id: 0, src: ‘http://infinityknow.com/template/CouldDragonByBjzaba.jpg’},
{id: 1, src: ‘http://infinityknow.com/template/MountainFortByBjzaba.jpg’},
{id: 2, src: ‘http://infinityknow.com/template/MountainOutpostByBjzaba.jpg’},
{id: 3, src: ‘http://infinityknow.com/template/CliffsByBjzaba.jpg’}
];
Vue.directive(‘assign-image’, {
update: function(id) {
let img = alllistimg[id];
this.el.style.backgroundImage = “url(“+img.src+”)”
}
});
//create simple directive
Vue.directive(‘show-slide’, {
params: [‘prev-slide’,’slide-id’],
update: function (current) {
//check if conditions
if(current == this.params.slideId) {
this.el.style.opacity = 1;
//set class name
this.el.className = “slide current-slide”;
}
else if(this.params.slideId == this.params.myprevslide){
this.el.style.opacity = 0;
//set class name
this.el.className = “slide previous-slide”
}
else {
this.el.style.opacity = 0;
//set class name
this.el.className = “slide next-slide”
}
}
});
Vue.component(‘slider’, {
template: ‘#slider-template’,
data: function() {
return {
//return value
productbannerlist: alllistimg,
vuecurslid: 0
}
},
computed: {
myprevslide: function() {
if(this.vuecurslid == 0)
return this.productbannerlist.length-1;
return this.vuecurslid – 1;
},
mynxtslid: function() {
if(this.vuecurslid == this.productbannerlist.length-1)
return 0;
return this.vuecurslid + 1;
}
},
methods: {
changeSlideNext: function() {
if(this.vuecurslid == this.productbannerlist.length-1){
this.vuecurslid = 0;
}
else this.vuecurslid++;
},
myprevslidechange: function() {
if(this.vuecurslid == 0){
this.vuecurslid = this.productbannerlist.length-1;
}
else this.vuecurslid -= 1;
}
}
});
new Vue({
el: ‘body’
});
[/php]
Example
I hope you have Got How to create an image slider with Vuejs And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.
