[Bug Report][3.6.14] VSlideGroup dynamic item count

[Kamiikaze]

Environment

Vuetify Version: 3.6.14 Vue Version: 3.4.31 Browsers: Opera 118.0.0.0 OS: Windows 10

Steps to reproduce

• Set the first item amount of the max which are visible without overflowing
• Set the second item amount to a higher number to overflow the slidegroup
• On page/component load -> first is selected and no arrows shows
• selecting the 2nd -> arrow shows as amount overflows
• selecting 1st again -> arrow are still visible

Expected Behavior

arrow should hide if the slide amount can fit without displaying the arrows

Actual Behavior

after arrows are displayed, the threshold to hide the arrows changes. so because the arrows are there the items already overflow which causes this issue

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Video: https://i.imgur.com/hyvAESQ.mp4

[jcjp]

I found a solution on your issue, here is a snippet of the solution:

1. Wrap the VSlideGroup in a div with a similar style above

    <v-row align="center">
      <div :style="{ width: getPseudoEpisodes?.length < 14 ? 'auto' : '100%' }"> // <- added this part
        <v-slide-group
		  ... // same props
        >
          // same code
        </v-slide-group>
      </div>
    </v-row>

2. Replace the show-arrows props with similar code below

    <v-row align="center">
        <v-slide-group
		  ...// same props
          :show-arrows="getPseudoEpisodes?.length > 13" // <- updated this part
        >
          // same code
        </v-slide-group>
    </v-row>

3. Use keys to update the VSlideGroup like this

    <v-row align="center" :key="getPseudoEpisodes?.length">
	 ... // same code
    </v-row>

[jcjp]

@Kamiikaze I'd like to ask if you need more help on this?

[Kamiikaze]

I found a solution on your issue, here is a snippet of the solution:

1. Wrap the VSlideGroup in a div with a similar style above

   // // same code

2. Replace the show-arrows props with similar code below

   // same code

3. Use keys to update the VSlideGroup like this

   ... // same code

Sorry, for the late response..

Your solution does fix the problem, thanks! But this should be fixed in the component itself and not need a hacky solution like this.

[Kamiikaze]

The issue now I have is, it isn't responsive anymore. If the page width gets smaller, the slidergroup overflows and doesnt show the arrow as those only depents on array count.

Setting a maxWidth on the wrapper prevents overflow but now its cut. This behaviour really needs to be fixed