如何使 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 來覆蓋組件本身的部分內容。

不幸的是，沒有更好的解決方案。 我一直主張只使用高級輪播組件！