我如何使 Vuetify 轮播图像响应，尤其是在移动屏幕上？

问题描述

我也尝试过使用 CSS 来实现这一点，但似乎不起作用，我知道 Vuetify 轮播响应不够灵敏，但我觉得 Veutify 团队现在应该已经解决了这个问题，或者有更好的方法来实现这一点吗？

 <v-flex xs12 md8  lg6 >
             <v-carousel  style="border-radius:4px; "  height="400px" class="slides">
        <v-carousel-item
          class="slides"
          v-for="(item,i) in items"
          :key="i"
          :src="item.src"
          reverse-transition="fade-transition"
          transition="fade-transition" 
          
          >
          </v-carousel-item>
      </v-carousel>
          </v-flex>

解决方法

Vuetify carousel 老实说是一个糟糕的 carousel 组件

我已经数不清有多少人抱怨它缺乏响应能力

没有“Vuetify”的方式来做你想做的事，你不能使用 <v-responsive> 来解决这让你有两个主要选择：

1. 为轮播使用不同的组件。 Vuetify 树抖动，因此您不会因使用或不使用而浪费/节省任何包大小。您可以使用专用的轮播插件，该插件功能更强大、更灵活，并且实际上可以在移动设备上正常运行。这是我建议的选项。
2. 编写大量自定义 CSS 以覆盖组件本身的某些部分。

不幸的是，没有更好的解决方案。我一直主张只使用高级轮播组件！