Vue Js Images Slide easy to understand, based on existing example on the net I just Develop and simplify it it a little
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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]; | |
}, | |
}, | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment