Problem when using v-slide-group with few items

user_14567381 0
Viewed 1558

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!

vuetify.js vue.js
2 Answers

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.

user_168855760

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

user_120789420
Related