過去画像切り替え、スタライダー例

[riefuchi220]

<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>