Vuetify 全屏轮播

Question

对于我网站的主页，我计划有一个全屏旋转木马，上面有一些文字。我可以制作旋转木马，但不能全屏显示（我想要它，这样无论设备大小如何，您都不必滚动。我尝试了几种方法，但 none 有效。

我在页面顶部有一个工具栏，它似乎会干扰并导致这些工具栏不起作用。

我试过：

<v-carousel style="height: 100%" hide-controls>

<v-carousel fullscreen hide-controls>

<v-carousel fill-height hide-controls>

但是所有这些要么让整个东西消失，要么让轮播坚持似乎是默认的最大高度。

示例：https://codepen.io/anon/pen/EwqWqP

如何获得全屏轮播？

Answer 1

height: 100% 不起作用，因为您的父元素例如 <body> 或 <some-other-div> 也需要一些高度。

您可以将父容器 height:100vh 和轮播设置为 height:100%，例如：

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;
}

这似乎对我有用 → Example

Answer 2

使用 Vuetify 2.5.8，您可以在 v-carousel 标签中设置 height="100vh"。

 <v-carousel height="100vh">

Vuetify 全屏轮播

Vuetify full-screen carousel

css

vue.js

vuetify.js