如何使 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> 来修复这让你有两个主要选择：

为轮播使用不同的组件。 Vuetify tree shakes 这样你就不会 wasting/saving 通过使用或不使用它来获得任何包大小。您可以使用功能更强大、更灵活并且实际上可以在移动设备上正常工作的专用轮播插件。这是我建议的选项。
编写大量自定义 CSS 以覆盖组件本身的部分内容。

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

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

how do I make Vuetify carousel images responsive especially on mobile screens?

javascript

slider

carousel

vue.js

vuetify.js