Vue JS carousel image Slider Example – Vuejs Image Slider

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!.

READ :  What is the Fritzbox device required for internet operation? 

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+”)”
}
});

READ :  Vue js Price-Time Range Slider Plugins

//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;
}
}
});

READ :  AngularJS Simple Line Charts using JSON

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.

Leave a Reply

Your email address will not be published. Required fields are marked *