Open riefuchi220 opened 5 months ago
<template> <v-app> <v-main> <v-container> <v-row justify="center"> <v-btn icon @click="prevImage"> <v-icon>mdi-chevron-left</v-icon> </v-btn> <v-img :src="images[currentIndex]" aspect-ratio="16/9"></v-img> <v-btn icon @click="nextImage"> <v-icon>mdi-chevron-right</v-icon> </v-btn> </v-row> <v-row> <v-slider v-model="currentIndex" :max="images.length - 1" step="1" thumb-label hide-details class="mt-4" ></v-slider> </v-row> </v-container> </v-main> </v-app> </template>
<script> export default { data() { return { currentIndex: 0, images: [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg' ], intervalId: null }; }, methods: { nextImage() { if (this.currentIndex < this.images.length - 1) { this.currentIndex++; } else { this.currentIndex = 0; } }, prevImage() { if (this.currentIndex > 0) { this.currentIndex--; } else { this.currentIndex = this.images.length - 1; } }, startAutoPlay() { this.intervalId = setInterval(() => { this.nextImage(); }, 3000); // 3秒ごとに画像を切り替え }, stopAutoPlay() { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; } } }, mounted() { this.startAutoPlay(); }, beforeDestroy() { this.stopAutoPlay(); } }; </script>