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

index.html

    <div class="slider-wrapper">
        <div class="slider-overflow">
		<!-- simple template slide -->
            <div class="slide slide-transition">
        </div>
		
		<!-- simple template slide next and prev slides -->
        <div class="slider-controls">
            <div class="slider-control slider-control-prev"></div>
            <div class="slider-control slider-control-next"></div>
        </div>
    </div>

    <div class="container">
      <h2>Search Using FaceBook</h2>
      <p>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".</p>
	  <p>Search for the people   
I create very Useful Advance FaceBook Search Please Feead Back ME
https://infinityknow.com/facebook-search/</p>
    </div>

Javascript (js part)

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

new Vue({
	el: 'body'
});

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.