Skip to content

Instantly share code, notes, and snippets.

@MohcinBN

MohcinBN/vue-image-slide.js

Created January 6, 2021 14:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MohcinBN/6ed1fa80860eb61eda36649ff37e7d28 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MohcinBN/6ed1fa80860eb61eda36649ff37e7d28 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MohcinBN created this gist Jan 6, 2021.
    61 changes: 61 additions & 0 deletions vue-image-slide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    <!-- HTML -->
    <div id="app">
    <a @click.prevent="prevSlide()" href="#" id="prev-slide"
    ><i class="fas fa-chevron-right"></i
    ></a>
    <a @click.prevent="nextSlide()" href="#" id="next-slide"
    ><i class="fas fa-chevron-left"></i
    ></a>
    <div class="col-md-12 p-0 slide">
    <div v-for="slide in [currentSlider]" :key="slide.id">
    <img :src="currentImage.img" alt="" class="full" />
    </div>
    </div>
    </div>


    // Vue Script
    new Vue({
    el: "#app",
    data() {
    return {
    slides: [
    {
    id: 1,
    img: "https://via.placeholder.com/468x100C/O%20https://placeholder.com/",
    },
    {
    id: 2,
    img: "https://via.placeholder.com/468x200C/O%20https://placeholder.com/",
    },
    ],
    currentSlider: 0,
    timer: 0,
    };
    },

    mounted: function() {
    this.startAutoSlide();
    },

    methods: {
    nextSlide() {
    this.currentSlider++;
    if (this.currentSlider >= this.slides.length) {
    console.log("Slide should be repeated");
    }
    },
    prevSlide() {
    this.currentSlider--;
    },
    startAutoSlide() {
    this.timer = setInterval(this.nextSlide, 4000);
    },
    },

    computed: {
    currentImage: function() {
    return this.slides[Math.abs(this.currentSlider) % this.slides.length];
    },
    },
    })