問題
7
Vue
Vuetifyでスライドショーを実装しよう！
Vueの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
今回の問題でポイントだったのは、v-carouselとv-carousel-item。
この二つのタグにそれぞれオプションをつけることで画像のスライドが実装できるようになる。
もし、もっと自分なりにカスタマイズしたいと思ったら、Vuetifyの公式サイトに全て載っているから
チェックしてみて欲しい。
