使用带有少量项目的 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 文档：

默认情况下，当容器溢出时，箭头始终显示在桌面上。

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

Answer 2

来自我们拥有的 show-arrows 道具的文档：

更改溢出箭头指示符的显示时间。默认情况下，当容器溢出时，箭头始终显示在桌面上。移动端容器溢出时，默认不显示箭头。如果容器溢出，show-arrows 值为 true 允许这些箭头显示在 Mobile 上。 desktop 的值始终在 Desktop 上显示箭头，而 mobile 的值始终在 Mobile 上显示箭头。值 always 在桌面和移动设备上显示箭头。

所以在v-slide-group 上设置show-arrows="always" 可以解决箭头可见性问题。

要使v-slide-items 居中，只需将它们排成一行，如下所示：

<v-row justify="center" align="center" class="my-1">
 <v-slide-item></v-slide-item>
</v-row>

查看下面的演示：

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-slide-group multiple show-arrows="always">
          <v-row justify="center" align="center" class="my-1">
            <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-row>
        </v-slide-group>
      </v-container>
    </v-main>
  </v-app>
</div>