[Bug Report] v-slide-group: can never see some of the items in full.

[jaunt]

Environment

Vuetify Version: 2.2.10 Vue Version: 2.6.11 Browsers: Chrome 80.0.3987.87 OS: Mac OS 10.13.6

Steps to reproduce

1. In the codepen, notice the last word on load, which is cut off. All you see is "gl".
2. Click the right arrow to see more. Now at the beginning all you see is: "adly".

So there is no way to see the entire word at once. In my app, I am using picture, not words, and it is very strange that a user can never see the complete image.

Expected Behavior

If an element is cut off before clicking on the right arrow, it should arrive at the left side left justified and fully visible.

Actual Behavior

Can never see a complete element if it was cut off before clicking the right arrow.

Reproduction Link

https://codepen.io/jauntcode/pen/GRJRpBr

[jaunt]

Here is my hack work-around which only works with constant width items. I don't think it would be too difficult to create a more general solution:

https://codepen.io/jauntcode/pen/jOPOQaa

[charlieLearn]

I wrap the items in a single item that never exceeds the slide-group's width and then I have center-active = true so I know when that item is paginated to the whole thing will be visible.

An actual solution would be to scroll to the next cut off item instead of scrolling the width of the slide-group.

The example in the documentation shows this bug as well with 'Option 5' being never fully visible: https://vuetifyjs.com/en/components/slide-groups/#usage

[shane3xsds]

Here is my hack work-around which only works with constant width items. I don't think it would be too difficult to create a more general solution:

https://codepen.io/jauntcode/pen/jOPOQaa

This solution fixed the problem but the slider will no longer scroll to the slide at the end of the list.