I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far:
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47212829330771693f">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17616272637e716e5725396f">[email protected]</a>/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>
<body>
<div id="app">
<v-app>
<v-main>
<v-container fill-height>
<v-carousel
cycle
hide-delimiters
style="height: 100%;">
<v-carousel-item>
<v-sheet
color="red lighten-1"
fill-height
style="height: 100%">
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide One
</div>
</v-row>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet
color="warning"
style="height: 100%">
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide Two
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2056554560120e58">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2d2e3e2f323d221b697523">[email protected]</a>/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>I am currently using Opera GX for rendering and serving the code with vue serve.