Feature Request: Support variable slide widths

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…

[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: