Vuetify Two Images in Carousel-Item - PullRequest
Новая
       84

Vuetify Two Images in Carousel-Item

1 голос
/ 09 июля 2020

Все, что я хочу, - это карусель, содержащая два изображения. По крайней мере, мне нужны две карусели рядом. Любые идеи, начиная с упаковки каруселей в столбцы строк или просто попытки листа, содержащего два изображения в каждом элементе карусели, не работают.

РЕДАКТИРОВАТЬ: Обратите внимание, как компонент выходит за правый край панели приложений (не должно происходить а также при переходе фон карусели мигает черным. В идеале я получаю карусель, которая реагирует с двумя изображениями внутри, переходящими без мигания черным. 

<template>
  <v-container>
    <v-row>
      <v-col cols="1">
        <v-btn icon large @click="toggle">
          <v-icon>{{ playIcon }}</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <v-slider 
          color="light-green" 
          thumb-color="light-green accent-4"
          thumb-size="30"
          track-color="light-green accent-4"
          v-model="run" 
          max="19"
          :tick-labels="ticksLabels"
          tick-size="6"
          ticks/>
      </v-col>
    </v-row>  
      <v-carousel 
        :cycle="playPause"
        hide-delimiters
        interval=3000
        v-model="run"
        height="700px"
        hide-delimiter-background
        show-arrows-on-hover
        >
        <v-carousel-item
          transition="fade-transition"
          reverse-transition="fade-transition"
          v-for="(item,i) in items"
          :key="i"
          >
          <v-row>
            <v-card width="49%">
              <v-img contain  :src="item.avg"/>
            </v-card>
            <v-spacer></v-spacer>
            <v-card width="49%">
              <v-img contain :src="item.std"/>
            </v-card>
          </v-row>
        </v-carousel-item>
      </v-carousel>
  </v-container>
</template>

Что дает приведенный выше код

1 Ответ

1 голос
/ 09 июля 2020

Вы можете исправить черное мигание, добавив эти два реквизита к v-карусели 

:dark="$vuetify.theme.dark"
:light="!$vuetify.theme.dark"

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

<style scoped>
.v-carousel .v-window-item {
  position: absolute;
  top: 0;
  width: 100%;
}

.v-carousel-item {
  height: auto;
}
</style>
...