Vue-carousel: Feature Request: Support variable slide widths

[Jones-S]

Hi there.
Thanks for providing this slider in the first place 🙌🏻.
But I have the following problem:
I have a slider with images with variable widths (when height is matched).
Lets imagine that the first image is about 70% width of the screen, and the second is just next to it.
So first I want to display the first image and 30% should already be filled by the second image.
If it slides 1 slide, I want it to stop as soon as the left edge of the second image is at the left edge of the slider wrapper.
I see that I can adjust the perPage setting, but this would sometimes mess up my slides (I get empty slides at the end) or some images are never displayed. And most of all: so far all my slides have the same width...

Maybe you can give me a hint how to get this done.
cheers

I have made some visualization what I am looking for:

[Jones-S]

Here as nother example of how this looks right now.
You can see empty slides and the little dots are linked incorrectly. After one slide the second image is gone already...

[buddyff]

Any fix for this ?

[andersonaguiar]

Any solutions?

[elviskudo]

any bug fixed?

[jillztom]

Anything yet?

[cleitonsouza]

Still waiting :(

[h4rDkur]

in one of my projects from vue-cli webpack. i encountered this bug too but only in dev.
when i build it for production it's fixed.

[AmrKafina]

Not sure if it helps, but I managed to fix this to some extent by adding max-width: 100% to the slide component.

[Jones-S]

Well, I have not touched this project for quite a while. If I do that or whenever I need a new slider I will try it out. Maybe somebody else has tested it?

[quinnlangille]

Hey guys, this is definitely an issue with slide width calculation. We determine the width of the carousel on component creation by doing some math that assumes all slides are the same width which is causing the extra space. From what I can see, it's not an easy fix as it would require lots of modifications that also rely on this logic.

@AmrKafina's solution works, just wrapping your slide content in a parent component with a set static width would work as well, though it may not have the desired look.

Regardless, I think this is something we should consider so I'll open this as a feature request (I somehow missed this when it initially opened?). Maybe someone will be interested in submitting a PR with the fix :octocat:

[wasimins]

I have created https://www.npmjs.com/package/vue-carousel-variable-width which is actually a fork of vue-caroousel plugin, its not up to the mark of PR as it is failing some test cases but somehow i managed to fix the issue mentioned by @Jones-S using it.

[areid4118]

I had a similar issue and adding min-width: 100%; to theslidecomponent worked for me.