Vue JS carousel image Slider Example – Vuejs Image Slider

Rate this post

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]

[/php]

Javascript (js part)

[php]
const alllistimg = [
{id: 0, src: ‘https://infinityknow.com/template/CouldDragonByBjzaba.jpg’},
{id: 1, src: ‘https://infinityknow.com/template/MountainFortByBjzaba.jpg’},
{id: 2, src: ‘https://infinityknow.com/template/MountainOutpostByBjzaba.jpg’},
{id: 3, src: ‘https://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;
}
}
});

READ :  Trigger button click on enter key JavaScript

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.