baianat / hooper

🎠 A customizable accessible carousel slider optimized for Vue
https://baianat.github.io/hooper/
MIT License
716 stars 133 forks source link

Different size of slide make scroll continue after the slide. #146

Open Crelagan opened 4 years ago

Crelagan commented 4 years ago

Describe the bug I have 10 slide, 1 is 700 px with, and the other are 300 px. But i have a problem, it scroll after the last slide and dispkay blank space.

I inspect the DOM and i saw that the slide width is set to entire container width..

i have this style : transform: translate(-475px, 0px); applied to the hooper track, and i see at every slide the value increase by 1152px instead of 320. How can i change the value of the transform ?

At start : transform: translate(0px, 0px); After One slide : transform: translate(-1152px, 0px); etc....

How can i set the size of a slide in terms of the size of the content ?

Thanks a lot

Expected behavior I need to stop the scroll when i see the last slide entirely on the right.

Screenshots See the letters on the left are the end of my last slide, and i can scroll into the blank.

http://zupimages.net/viewer.php?id=19/43/iz22.png

Desktop (please complete the following information):

Additional context

``

`