Vuetify full-screen carousel

3
votes

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?

1
cssvue.jsvuetify.js
Share more code. – pirs
@pirs I have updated the question. – Akaash Dash

1 Answers

7
votes

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