46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import '../css/app.css';
|
|
import Alpine from 'alpinejs';
|
|
|
|
window.Alpine = Alpine;
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('carousel', (slides) => ({
|
|
slides,
|
|
autoplayIntervalTime: 4000,
|
|
currentSlideIndex: 1,
|
|
isPaused: false,
|
|
autoplayInterval: null,
|
|
previous() {
|
|
if (this.currentSlideIndex > 1) {
|
|
this.currentSlideIndex = this.currentSlideIndex - 1
|
|
} else {
|
|
// If it's the first slide, go to the last slide
|
|
this.currentSlideIndex = this.slides.length
|
|
}
|
|
},
|
|
next() {
|
|
if (this.currentSlideIndex < this.slides.length) {
|
|
this.currentSlideIndex = this.currentSlideIndex + 1
|
|
} else {
|
|
// If it's the last slide, go to the first slide
|
|
this.currentSlideIndex = 1
|
|
}
|
|
},
|
|
autoplay() {
|
|
this.autoplayInterval = setInterval(() => {
|
|
if (!this.isPaused) {
|
|
this.next()
|
|
}
|
|
}, this.autoplayIntervalTime)
|
|
},
|
|
// Updates interval time
|
|
setAutoplayInterval(newIntervalTime) {
|
|
clearInterval(this.autoplayInterval)
|
|
this.autoplayIntervalTime = newIntervalTime
|
|
this.autoplay()
|
|
},
|
|
}));
|
|
});
|
|
|
|
Alpine.start();
|