Changing the Vuetify carousel height

Question

Is it possible to reduce the height of a <v-carousel>? I saw in the documentation that they were working on it, but has it been implemented yet? If not is there a work around? I'm just trying to set a max height.

Answer 1

You can set auto height of it:

<v-carousel height="auto">

Answer 2

There's no need to use CSS neither important on it. You can use one prop to change the height:

Name: height

Default: 500

Type: number | string Sets the component height

Eg.

  <v-carousel height="500px">
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
    ></v-carousel-item>
  </v-carousel>

Answer 3

In your main vue component or in the component where you have the v-carousel add a css rule:

.carousel {
  height: 200px !important;
}

• Add !important if it's not working without it

• If you're putting this rule in the main component make sure the <style> tag doesn't have the word scoped in it

Answer 4

If you want dynamic height of v-carousel based on image, for example.
You can use something like this:

example:

<v-carousel :style="{'height': this.carouselHeight}">
   <v-carousel-item v-for="(item, index) in items" :key="index" style="height: auto" :src="item.image"></v-carousel-item>
</v-carousel>

1. set data prop:

data () {
 return {
carouselHeight: 0
  {
 }

2. create method:

getCarouselHeight () {
  var item = document.getElementsByClassName('v-image__image--cover')
   this.carouselHeight = item[0].clientHeight + 'px'
  }

3. call method on mounted:

mounted () {
this.getCarouselHeight()
}