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

Question

I also tried effecting this with CSS but seems not to be working, I am aware Vuetify carousels are not quite responsive but I feel the Veutify team should have addressed such issue by now or is there a better way to achieve this?

 <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 carousel is honestly an awful carousel component

I can't count the amount of people I've seen complain about its lack of responsiveness

There's no "Vuetify" way of doing what you want to do and you can't use <v-responsive> to fix which leaves you with two main options:

1. Use a different component for a carousel. Vuetify tree shakes so you're not wasting/saving any bundle size by using or not using it. You can use a dedicated carousel plugin that's a lot more powerful, flexible and actually works properly on mobile. This is the option I suggest.
2. Write a fair amount of custom CSS to overwrite parts of the component itself.

Unfortunately there's not too much better of a solution. I always advocate for just using a superior carousel component!