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.

Solution 1

You can set auto height of it:

<v-carousel height="auto">

Solution 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>

Solution 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

Solution 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()
}

View more solutions

Comments

[Otto]

Perfect! I can't upvote your comment yet, cause I'm new, but thanks a lot!

[Un1]

@Otto no problem

[Steve]

Thank you! Why isn't this the default behaviour? :-)

[mr_squall]

It is important to set eager attribute for image: <v-carousel-item eager> to have content inside carousel immediately after page opened and eliminate height glitches on sliding.

[Purush Pawar]

@mr_squall, Can't thank you enough for mentioning that eager attribute. I feel this is not documented well enough. Spent so much time on figuring out why my carousel items are not displaying the images the first time but do it on second cycle.