自動再生例

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