Блог

В моем VuetifyJS v-carousel-item у меня есть изображение, заголовок и подзаголовок, как показано ниже. Но внизу у меня много пробелов. Я установил цвет фона на v-carousel-item фиолетовый, и мы можем видеть многое из этого на картинке.

Я попытался удалить содержимое элемента карусели, и вот что я получил.

Я попытался установить высоту, удалить отступы и поля, но ничего не получилось, ниже приведен мой код

           <v-carousel
            cycle
            :show-arrows="false"
            style="background-color: pink"
          >
            <v-carousel-item
              v-for="item in carouselItems"
              :key="item.id"
              style="background-color: purple; height: 800px"
              class="pb-0 mb-0"
            >
              <- Content for Carousel item->
            </v-carousel-item>
          </v-carousel>
 

Любые предложения приветствуются.

Как упоминалось в документе vuetify, значение по умолчанию для height of v-carousel равно 500. Поэтому, если вы не зададите ему значение, высота по умолчанию v-carousel будет равна 500.

Поэтому я предлагаю использовать картинки с одинаковой высотой в карусели и устанавливать их в height соответствии с ними. Подобный этому:

   <v-carousel
    cycle
    :show-arrows="false"
    style="background-color: pink"
    height='120px'
  >
    <v-carousel-item
      style="background-color: purple; height: 70px"
      class="pb-0 mb-0"
    >
      <- Content for Carousel item->
    </v-carousel-item>
    <v-carousel-item
      style="background-color: purple; height: 70px"
      class="pb-0 mb-0"
    >
      <- Content for Carousel item->
    </v-carousel-item>
    <v-carousel-item
      style="background-color: purple; height: 70px"
      class="pb-0 mb-0"
    >
      <- Content for Carousel item->
    </v-carousel-item>
  </v-carousel>
 

У меня была эта проблема, и я решил ее очень легко. Просто поместите содержимое v-карусели в родительский div с классом контейнера, как показано ниже :

 <div class="container">
    <v-carousel>
        <v-carousel-item>
            your codes
        </v-carousel-item> 
    </v-carousel>
</div>
 

Наслаждайтесь этим!

Проблема в том, что во многих примерах документации неправильно используется v-row компонент для упаковки содержимого внутри v-carousel-item .

   <v-carousel v-model="model">
    <v-carousel-item
      v-for="(color, i) in colors"
      :key="color"
    >
      <v-sheet
        :color="color"
        height="100%"
        tile
      >
        <!-- This v-row will get you the undesired empty space at the bottom of the carousel -->
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <div class="text-h2">
            Slide {{ i   1 }}
          </div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
 

Вам нужно только заменить v-row его на div:

   <v-carousel v-model="model">
    <v-carousel-item
      v-for="(color, i) in colors"
      :key="color"
    >
      <v-sheet
        :color="color"
        height="100%"
        tile
      >
        <!-- This div will get rid of the undesired empty space at the bottom of the carousel -->
        <div class="d-flex fill-height align-center justify-center">
          <div class="text-h2">
            Slide {{ i   1 }}
          </div>
        </div>
      </v-sheet>
    </v-carousel-item>