[Feature Request] add slots for v-carousel controls

[jeck5895]

New Functionality

I want to set thumbnails of the images as the carousel controls

Improvements

there are no work around for this feature at the moment.

Bugs or Edge Cases it Helps Avoid

doesnt solve any bugs, but may allow for a richer and more customizable interface.

[nekosaur]

This could be supported by allowing the use of slots for the next/prev controls

[jeck5895]

Sorry but I don't get it... Can you elaborate it?

[killbotXD]

@jeck5895 I had one more suggestion. We can also have custom text on the delimiters rather than Icons/Images.
I was trying to make a carousel like this but couldn't find any method to add text inside delimiters.
It would be nice if someone working on this issue tries to do this also.

[killbotXD]

same can be done to the carousel controls.

[chasedougherty4628]

I know you can simply add the images and then change the "value" attribute on the v-carousel element. This will allow you to change to the selected image. It would be great if we can add to the documentation that you can change the current carousel item by setting the value on the carousel. That is if it's supported

<v-carousel
    hide-delimiters
    :value="currentCarousel"
  >
    <v-carousel-item
      v-for="(component, index) in products()"
      :key="index"
    >
      <div class="justify-center d-flex flex-column align-center">
        <h3 class="red--text text--darken-3 text-center">
          Products
        </h3>
        <h1 class="text-center font-weight-bold pb-8">
          {{ component.attributes.displayName }}
        </h1>
        <v-img
          :contain="true"
          max-width="1000"
          max-height="700"
          :src="require(`@/assets/images/dimensions/${component.attributes.imageName}`)"
        />
        <!-- pictures below picture -->
        <div class="justify-center d-flex">
          <div
            v-for="(product, i) in productsWithDimensions()"
            :key="i"
            class="pa-2"
          >
            <v-img
              :contain="true"
              max-width="80"
              max-height="70"
              :src="require(`@/assets/images/dimensions/${product.attributes.dimensionImageName}`)"
              :class="index === i ? 'selected-image-color' : ''"
              @click="currentCarousel = i"
            />
          </div>
        </div>
      </div>
    </v-carousel-item>
  </v-carousel>

[KaelWD]

prev/next slots added in #12602, delimiter slots may come in some future version.

[KaelWD]

An item slot was added in v3 with #14813