Problem when using v-slide-group with few items-CodePudding

I'm having a problem with v-slide-group, sometimes I have 2~3 items and sometimes I have 10 items or more, but with fewer items it doesn't show the arrows neither the slide-items are centered Here is my 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>

and here is my JS:

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

  }
})

I also made this codepen: https://codepen.io/mastergoshi/pen/rNwYJGz

How can I at least center the slide items from the second slide-group? Even better would be to show the arrows as well with the slide-items centered

Thank you very much!

CodePudding user response：

In order to center the slide you can use below css:

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

You can see example in this codepen.

According to vuetify docs:

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

So if you want to show the arrows you should reduce the size of wrapper container. Otherwise vuetify doesn't show the arrows.

CodePudding user response：

from the doc for the show-arrows prop we have:

Change when the overflow arrow indicators are shown. By default, arrows always display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A show-arrows value of true allows these arrows to show on Mobile if the container overflowing. A value of desktop always displays arrows on Desktop while a value of mobile always displays arrows on Mobile. A value of always always displays arrows on Desktop and Mobile.

so setting show-arrows="always" on v-slide-group resolves the arrows visibility issue.

to center the v-slide-items simply put them in a row like:

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

check out the demo below:

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>