Vuetify: [Feature Request] Carousel - Add text overlay to image

Created on 25 Sep 2017 · 8Comments · Source: vuetifyjs/vuetify

Versions

Vue 2.4.2 - Vuetify 0.15.2

What is expected ?

It would also be nice to be able to add text to the carousel item to overlay on the image (could easily do this with card component.

What is actually happening ?

Currently the carousel is very basic and really only allows you to change the icons inside of it.

Reproduction Link

Current Carousel
https://vuetifyjs.com/components/carousels

Link to another framework carousel
http://element.eleme.io/#/en-US/component/carousel

What will it allow you to do that you can't do today?

allow you to place subtitles on images

### How will it make current work-arounds straightforward?
Well there are no examples of doing any of this on the main site so I'm not even sure there are work arounds for this.

What potential bugs and edge cases does it help to avoid?

gesture and event based bugs for sure and css related bugs trying to hide certain elements to the existing carousel

I'm not really sure what other information you may need so please let me know if there is anything you'd like more input on. I originally removed the bottom part of the boilerplate for the ticket because the directions for feature requests were a little hazy.

feature

Source

jameshhood

👍1

Most helpful comment

@mdew192837 here you have a sample code with dynamic data binding:

   <div id="header-carousel">
      <v-carousel style="height: 100%">
        <v-carousel-item v-for="(slide, i) in slides" :src="slide.src" :key="i">
          <v-jumbotron dark>
            <v-container fill-height>
              <v-layout align-center>
                <v-flex>
                  <h3 class="display-3">{{ slide.title }}</h3>
                  <span class="subheading">{{ slide.text }}</span>
                </v-flex>
              </v-layout>
            </v-container>
          </v-jumbotron>
        </v-carousel-item>
      </v-carousel>
    </div>

CristalT on 28 Mar 2018

👍13 🎉3

All 8 comments

Breakout from #1617

jameshhood on 25 Sep 2017

This is now possible with the addition of v-jumbotron (v-carousel-item extends this).

johnleider on 7 Jan 2018

@johnleider

Could you provide a code snippet on how to do this or link me to somewhere on the VuetifyJS documentation that shows me how to do this? Thanks!

mdew192837 on 17 Mar 2018

👍1

@mdew192837 here you have a sample code with dynamic data binding:

   <div id="header-carousel">
      <v-carousel style="height: 100%">
        <v-carousel-item v-for="(slide, i) in slides" :src="slide.src" :key="i">
          <v-jumbotron dark>
            <v-container fill-height>
              <v-layout align-center>
                <v-flex>
                  <h3 class="display-3">{{ slide.title }}</h3>
                  <span class="subheading">{{ slide.text }}</span>
                </v-flex>
              </v-layout>
            </v-container>
          </v-jumbotron>
        </v-carousel-item>
      </v-carousel>
    </div>

CristalT on 28 Mar 2018

👍13 🎉3

Thank you @CristalT !

mdew192837 on 29 Mar 2018

What's the best way to do this now that jumbotron is deprecated?