Vuetify Fullscreen Carousel

index.html

<div id="app">
  <v-app id="inspire">
    <v-carousel
      hide-controls
      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>

script.js

new Vue({
  el: '#app',
  data () {
    return {
 items: [
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
          }
        ]
    }
  }
})

scripts

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>

style.css

html {
  overflow: hidden;
}
#inspire {
  height: 100vh;
  background-color: black;
  border-style: solid;
  border-color: grey;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

vuetify-fullscreen-carousel.markdown

Vuetify Fullscreen Carousel

A Pen by Jasen Michael on CodePen.

License.