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 :  .htaccess Redirect old domain to new domain with URL match

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 :  Get Url Parameter with Query String using VueJs

//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 :  Fetch Object values in array using angular.foreach Example

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 *