こんにちは。かくすけです。
今回はVuetifyを使ったカルーセルの表示を行います！ ※筆者はVueに触り始めたばかりの初心者です

Vuetify導入の記事

kakusuke98.hatenablog.com

参考ページ
Vuetifyの公式ページ(カルーセルの説明ページ)

<template>
  <v-carousel>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
    ></v-carousel-item>
  </v-carousel>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
          }
        ]
      }
    }
  }
</script>

公式にある内容をそのままベッタリ
templeteとscriptを別ファイルに準備してそれぞれ読み込むことで
「同じデザインを使うけど表示する画像はページによって変える」
とかできるのかな？

内容の役割はこんな感じですね f:id:kakusuke98:20190701232715p:plain

次に、読み込み元のページからカルーセルを呼び出します。
私はTopページ用に作成したHome.vueから呼び出します。

./src/views/Home.vue

<template>
  <div class="home">
    <Carousel/>
  </div>
</template>

<script>
// @ is an alias to /src
import Carousel from '@/components/Carousel.vue'

export default {
  name: 'home',
  components: {
    Carousel
  }
}
</script>

下の三か所がポイント

f:id:kakusuke98:20190701233321p:plain

それでは、起動してページを確認してみましょう。

$ npm run serve

f:id:kakusuke98:20190701233423p:plain

ちゃんとデフォルトのカルーセルが表示されました！
簡単お手軽！ありがたいですね！

カルーセルを編集

画像をクリックしたときは他ページに飛ばすようにしたかったので私なりにカスタマイズしました。

./src/components/Carousel.vue

<template>
  <v-carousel height="auto">
    <a v-for="(item,i) in items" :key="i" v-bind:href=item.link>
      <v-carousel-item :key="i" :src="item.src">
      </v-carousel-item>
    </a>
  </v-carousel>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: '/img/golden.png',
            link: 'https://store.line.me/stickershop/product/6848330/ja?from=sticker'
          },
          {
            src: '/img/carrots.png',
            link: 'https://store.line.me/stickershop/product/1026879/ja?from=sticker'
          },
          {
            src: '/img/channel.png',
            link: 'https://www.youtube.com/channel/UCSjqt_ECemGhAOAGiTk_89A'
          },
          {
            src: '/img/twitter.png',
            link: 'https://twitter.com/Kakusuke98'
          }
        ]
      }
    }
  }
</script>

画像は./static/img/以下の画像を呼び出しています。

そしてカスタマイズポイントは以下！
まずは画像クリック時に他ページに飛ばす部分。

f:id:kakusuke98:20190703221429p:plain