【问题标题】:how do I make Vuetify carousel images responsive especially on mobile screens?如何使 Vuetify 轮播图像响应,尤其是在移动屏幕上?
【发布时间】:2021-05-14 09:51:04
【问题描述】:

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

【问题讨论】:

    标签: javascript vue.js slider vuetify.js carousel


    【解决方案1】:

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

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

    没有“Vuetify”的方式来做你想做的事,你不能使用&lt;v-responsive&gt; 来解决这让你有两个主要选择:

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

    很遗憾,没有更好的解决方案。我一直主张只使用高级轮播组件!

    【讨论】:

    • 感谢 Jordan 的回复,非常感谢。
    • 对不起,我不能给你更好的答案。那里有很多非常好的轮播组件,所以你不会出错。我不知道为什么 Vuetify 没有改进该组件。如果您认为它有帮助,请务必将答案标记为正确,以便获得更多可见性! :) 祝你好运!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-10-06
    • 2021-12-01
    • 2018-04-04
    • 1970-01-01
    • 2014-02-06
    • 1970-01-01
    • 2021-02-11
    相关资源
    最近更新 更多