vue.js - 在 Carousel-Item 中对两个图像进行 Vuetify

问题描述

我想要的只是有一个包含两个图像的轮播项目。至少我想要两个并排的旋转木马。自从将轮播包装在 row-cols 中或简单地尝试在每个轮播项目中包含两个图像的工作表之后的任何想法都行不通。

编辑：注意组件如何超过应用程序抽屉的右边缘（不应该发生，并且在过渡时，轮播的背景也会闪烁黑色。理想情况下，我得到一个轮播，它对内部的两个图像进行响应而不会闪烁黑色。

<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>

标签： vue.jsvuejs2vue-componentvuetify.js

您可以通过将这两个道具添加到 v-carousel 来修复黑色闪烁

: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>

vue.js - 在 Carousel-Item 中对两个图像进行 Vuetify

问题描述

解决方案

推荐阅读