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 justify="center" class="mt-4"> <v-btn @click="togglePlay"> <v-icon v-if="isPlaying">mdi-pause</v-icon> <v-icon v-else>mdi-play</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' // 他の画像URL ], intervalId: null, isPlaying: false }; }, methods: { nextImage() { if (this.currentIndex < this.images.length - 1) { this.currentIndex++; } else { this.stopAutoPlay(); } }, prevImage() { if (this.currentIndex > 0) { this.currentIndex--; } }, startAutoPlay() { this.isPlaying = true; this.intervalId = setInterval(() => { this.nextImage(); }, 1000); // 1秒ごとに画像を切り替え }, stopAutoPlay() { this.isPlaying = false; if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; } }, togglePlay() { if (this.isPlaying) { this.stopAutoPlay(); } else { this.startAutoPlay(); } } }, beforeDestroy() { this.stopAutoPlay(); } }; </script> <style> /* 必要に応じてスタイルを追加 */ </style>