問題
7
Vue.js
Vuetifyでスライドショーを実装しよう！
Vue.jsの問題に挑戦しよう！
問題
「Vuetifyでスライドショーを実装しよう！」
次はVuetifyでスライドショーを作ってみよう。
使用する画像は自分の好きな画像でOK！
あらかじめエディタに書くコード
-- headタグ
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
-- /head
<div id="app">
<v-app>
<v-main style="margin-top: 50px;">
<template>
<v-carousel height="600">
<v-carousel-item v-for="(item, i) in items" :key="i" :src="item.src" reverse-transition="fade-transition" transition="fade-transition">
</v-carousel-item>
</v-carousel>
</template>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
¥Vue¥
期待する画面
解答と解説（Vuetifyでスライドショーを実装しよう！）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回の問題でポイントだったのは、v-carouselとv-carousel-item。
この二つのタグにそれぞれオプションをつけることで画像のスライドが実装できるようになる。
もし、もっと自分なりにカスタマイズしたいと思ったら、Vuetifyの公式サイトに全て載っているから
チェックしてみて欲しい。
