VUE3 入門チュートリアル: Vue.js プラグインを使用して画像カルーセルを実装する

const Carousel = Vue.extend({
  template: `
    <div class="carousel-container">
      <div class="carousel">
        <div class="slides" :style="slideStyle">
          <div v-for="slide in slides" :key="slide.id" class="slide" :style="{ background: slide.image }"></div>
        </div>
        <div>
          <button @click="navigate(-1)">Prev</button>
          <button @click="navigate(1)">Next</button>
        </div>
      </div>
    </div>
  `,
  props: {
    images: {
      type: Array,
      required: true,
      default: () => []
    },
    slideInterval: {
      type: Number,
      default: 3000
    },
    slideSpeed: {
      type: Number,
      default: 500
    }
  },
  computed: {
    slideStyle() {
      return {
        transform: `translateX(${this.currentSlide * -100}%)`,
        transition: `transform ${this.slideSpeed}ms ease-in-out`
      }
    }
  },
  data() {
    return {
      currentSlide: 0,
      slides: []
    }
  },
  created() {
    this.slides = this.images.map((image, index) => {
      return { id: index, image }
    })
    this.start()
  },
  methods: {
    navigate(direction) {
      const totalSlides = this.slides.length
      if (direction === 1) {
        this.currentSlide = (this.currentSlide + 1) % totalSlides
      } else if (direction === -1) {
        this.currentSlide = (this.currentSlide - 1 + totalSlides) % totalSlides
      }
    },
    start() {
      setInterval(() => this.navigate(1), this.slideInterval)
    }
  }
})

Vue.use({
  install(Vue) {
    Vue.component('carousel', Carousel)
  }
})

<carousel :images="[
    'https://picsum.photos/id/1/800/400',
    'https://picsum.photos/id/2/800/400',
    'https://picsum.photos/id/3/800/400'
]">
</carousel>