Vue 実践的な戦闘: 画像カルーセル コンポーネントの開発

<div id="app">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
  
  },
  methods: {
  
  }
})
</script>

Vue.component('Carousel', {
  props: ['list', 'interval'],
  data() {
    return {
      currentIndex: 0,
      timer: null
    }
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.list.length) % this.list.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.list.length;
    },
    goTo(index) {
      this.currentIndex = index;
    },
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.next();
      }, this.interval);
    },
    stopAutoPlay() {
      clearInterval(this.timer);
    }
  },
  mounted() {
    this.startAutoPlay();
  },
  template: `
    <div class="carousel">
      <div class="carousel-list" :style="{'transform': 'translateX(' + (-100 * currentIndex) + '%)'}">
        <div class="carousel-item" v-for="(item, index) in list" :key="index">
          <a :href="item.link">
            <img  :src="item.src" alt="Vue 実践的な戦闘: 画像カルーセル コンポーネントの開発" >
          </a>
        </div>
      </div>
      <button class="carousel-prev" @click="prev">上一张</button>
      <button class="carousel-next" @click="next">下一张</button>
      <div class="carousel-indicators">
        <span class="dot" :class="{active: index === currentIndex}" v-for="(item, index) in list" @click="goTo(index)"></span>
      </div>
    </div>
  `
})

new Vue({
  el: '#app',
  data: {
    images: [
      {src: 'image1.jpg', link: 'http://example.com/1'},
      {src: 'image2.jpg', link: 'http://example.com/2'},
      {src: 'image3.jpg', link: 'http://example.com/3'}
    ],
    interval: 3000
  }
})

<div id="app">
  <carousel :list="images" :interval="interval"></carousel>
</div>