Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue Js Images Slide easy to understand, based on existing example on the net I just Develop and simplify it it a little
<!-- 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