Vue
Googleでログイン問題7：Vuetifyでスライドショーを実装しよう！
次はVuetifyでスライドショーを作ってみよう。
使用する画像は自分の好きな画像でOK！
使用する画像は自分の好きな画像で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¥
期待する画面
解答ソースコード
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [
{
src: "Vue.jpg"
},
{
src: "React.png"
},
{
src: "Angular.png"
}
]
}
})
</script>
¥Vue¥
完了にする！
活動記録をTweetする
この二つのタグにそれぞれオプションをつけることで画像のスライドが実装できるようになる。
もし、もっと自分なりにカスタマイズしたいと思ったら、Vuetifyの公式サイトに全て載っているから
チェックしてみて欲しい。