Menu
For the home page of my site I am planning to have a fullscreen carousel with some text on top of this. I could make the carousel, but not have it fullscreen (I want it so that you never have to scroll, no matter the device size. I have tried several things, but none work.
I have a toolbar at the top of the page which seems to interfere and cause these to not work.
I have tried:
<v-carousel style="height: 100%" hide-controls>
<v-carousel fullscreen hide-controls>
<v-carousel fill-height hide-controls>
But all of them either make the whole thing disappear or make the carousel stick with what seems to be the default maximum height.
Example: https://codepen.io/anon/pen/EwqWqP
How could I get a fullscreen carousel?
538
height: 100% does not work, because your parent element for example <body> or <some-other-div> needs some height too.
What you can do is setting your parent container height:100vh and your carousel to height:100%, like:
HTML
<div id="app">
<v-app id="inspire">
<v-toolbar></v-toolbar>
<v-carousel style="height:100%">
<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item>
</v-carousel>
</v-app>
</div>
CSS
#inspire {
height: 100vh;
}
This seems to work for me → Example
166
With Vuetify 2.5.8 you can set height="100vh" in your v-carousel tag.
<v-carousel height="100vh">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With