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

Question

我也尝试过使用 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>

Answer 1

Vuetify 轮播确实是一个糟糕的轮播组件

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

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

1. 为轮播使用不同的组件。 Vuetify 树抖动，因此您不会通过使用或不使用它来浪费/保存任何包大小。 你可以使用一个专用的轮播插件，它更强大、更灵活，并且实际上可以在移动设备上正常工作。 这是我建议的选项。
2. 编写大量自定义 CSS 来覆盖组件本身的部分内容。

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