vue.js - 使用带有少量项目的 v-slide-group 时出现问题

Question

我在使用 v-slide-group 时遇到问题，有时我有 2~3 个项目，有时我有 10 个或更多项目，但项目较少时，它不会显示箭头，幻灯片项目也不居中 这是我的 HTML:

    <div id="app">
  <v-app id="inspire">
    <v-sheet
    elevation="8"
    class="mx-auto mt-10"
    max-width="700"
  >
    <v-slide-group
      multiple
      show-arrows
    >
      <v-slide-item
        v-for="n in 25"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-btn
          class="mx-2"
          :input-value="active"
          active-class="purple white--text"
          depressed
          rounded
          @click="toggle"
        >
          Options {{ n }}
        </v-btn>
      </v-slide-item>
    </v-slide-group>
      <v-slide-group
      multiple
      show-arrows
    >
      <v-slide-item
        v-for="n in 3"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-btn
          class="mx-2"
          :input-value="active"
          active-class="purple white--text"
          depressed
          rounded
          @click="toggle"
        >
          Options {{ n }}
        </v-btn>
      </v-slide-item>
    </v-slide-group>
  </v-sheet>
  </v-app>
</div>

这是我的 JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    model: null,
  }),
  methods:{

  }
})

我还制作了这个codepen:https://codepen.io/mastergoshi/pen/rNwYJGz

我怎样才能至少将第二个幻灯片组中的幻灯片项目居中？ 更好的是显示箭头以及幻灯片项目居中

非常感谢!

Answer 1

为了使幻灯片居中，您可以使用以下 css:

.v-slide-group__content {
  justify-content: center;
}

您可以在 codepen 中查看示例.

根据 vuetify 文档:

By default, arrows always display on Desktop when the container is overflowing.

因此，如果您想显示箭头，您应该减小包装容器的大小。否则 vuetify 不会显示箭头。