CODEWITHSUNDEEP
cssvue.jsvuetify.js
Akaash Dash
Akaash Dash

Reputation: 53

Vuetify full-screen carousel

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?

Upvotes: 5

Views: 14889

Answers (2)

Rob Mello
Rob Mello

Reputation: 126

With Vuetify 2.5.8 you can set height="100vh" in your v-carousel tag.

 <v-carousel height="100vh">

Upvotes: 3

Beat
Beat

Reputation: 4412

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

Upvotes: 7

Related Questions