Some issues with vue.js2 / vuetify carousel images

Question

I use carousel component from https://vuetifyjs.com/en/components/carousels

<section v-show="artistImagesList.length > 0">
    <v-carousel>
        <v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :src="nextArtistImage.image_url" :key="nextArtistImage.id" :alt="nextArtistImage.image_url">
            <div class="carousel_image_title">{{ concatStr(nextArtistImage.description, 100) }}</div>
        </v-carousel-item>
    </v-carousel>
</section>

Using it I need more options to control some images like

1) If images are too big in width/height I want to show images with size ratio of carousel size. Is it possibel?

2) How set max width/height for image area?

3) When I open page with seconds interval default I see empty carousel area and only after interval default seconds first image is opened. I set valid list of images, without empty elements. But looks like some empty image is opened at first.

Is it wrapper of some library? Can I get access to its options? Please give reference to example how to make it...

Packages used

vue.js2.5.7

vuetify,1.0.8

Are you using axios to load your images from an api?

Dontreadonme
– Dontreadonme

2018-05-31 07:20:45 +00:00
Commented May 31, 2018 at 7:20 — Dontreadonme
– Dontreadonme, Commented May 31, 2018 at 7:20
Try with this: changing-the-vuetify-carousel-height regards

Ivan Stanisavljevic
– Ivan Stanisavljevic

2018-10-15 14:42:32 +00:00
Commented Oct 15, 2018 at 14:42 — Ivan Stanisavljevic
– Ivan Stanisavljevic, Commented Oct 15, 2018 at 14:42

Dontreadonme · Accepted Answer · 2018-05-31 10:20:11Z

2

For number 2) to set the carousel to 400px width and height, I'm currently using the following code. But to answer 1) you can set these values to whatever you want.

   <v-flex xs12 style="width:100%; max-width:400px; margin: auto 0">
        <v-carousel cycle hide-delimiters style="width:100%; max-height:400px" class="white">
          <v-carousel-item v-for="(item,i) in images" :src="baseUrl+item.url" :key="i"></v-carousel-item>
        </v-carousel>
      </v-flex>

And for 3, if you're getting this error because you're loading images through axios (like i was) it can be fixed with adding a v-if to the carousel. v-if="myloadedimages.length > 0". This way the carousel will only be shown once the images have been loaded, and the first image will display.

edited May 31, 2018 at 10:20

answered May 31, 2018 at 5:07

Dontreadonme

3343 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Some issues with vue.js2 / vuetify carousel images

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related