How to add text above the delimiters of a carousel using Vuetify?

Question

I am using Vue/Vuetify and need to add text to carousel slides for descriptions. I think placing the text above the delimiters and below the image is the best place for it. I'd rather not overlay the text on the image. Vuetify documentation doesn't give any examples for this. How can this be done?

Answer 1

You can make own carousel design inside of v-carousel-item tags, using vuetify elements to place text where you want. Example on cedepen

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
    <v-layout row wrap justify-center>
      <v-flex xs6>
         <v-carousel hide-delimiters>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"  
          >
            <v-img
                    :src="item.src"
                   class="fill-height"
                  >
                    <v-container
                      fill-height
                      fluid
                      pa-0 ma-0

                    >
                      <v-layout fill-height align-end>
                        <v-flex xs12>
                          <v-card color="red" class="pa-2" >
                          <span class="headline white--text" v-text="item.src">                               </span>
                          </v-card>
                        </v-flex>
                      </v-layout>
                    </v-container>
                  </v-img>
             </v-carousel-item>
           </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Updated

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
    <v-layout row wrap justify-center>
      <v-flex xs6>
         <v-carousel>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"  
            :src="item.src"
          >

                    <v-container
                      fill-height
                      fluid
                      pa-0 ma-0 pb-3 

                    >
                      <v-layout fill-height align-end pb-4 mb-4>
                        <v-flex xs12>
                          <v-card color="red" class="pa-2">
                          <span class="headline white--text" v-text="item.src">                               </span>
                          </v-card>
                        </v-flex>
                      </v-layout>
                    </v-container>

             </v-carousel-item>
           </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>