Variable widths?

[JimmyMultani]

Hey @rcbyr!

I saw your library on reddit and was blown away! I was wondering if you plan on supporting variable widths for slides?

Thanks!

[rcbyr]

Hey @JimmyMultani,

thank you very much. Since this is the third time someone asking for that, i would say yes. I'll put this on my list. Give me a few weeks, the list is already long :-D

[rowanbeentje]

This would be lovely! I think it would be most easily supported by not trying to support a complex array config of sizes of any kind, but allowing slidesPerView to be set to something like auto so that each slide can be sized by the contents/CSS.

This makes slidesSetWidths() easier but would make a lot of the positioning much harder... 😅

Edit: thinking about it, my use case could be addressed by just being able to supply a slide width, instead of slidesPerView. I'm attempting to use keen-slider on a responsive elements, and I'd like the slides to stay the same size, but show differing quantities of them depending on parent width. Is that the same kind of thing you were after @JimmyMultani, or should I create a new issue?

[rcbyr]

Hey @rowanbeentje ,

thanks for your thoughts. I'm currently thinking about this problem, too, and how to implement it in the smartest way. And I hope to make some progress in the near future.

As far as your problem is concerned, I think you can already build what you have described, right?

[rowanbeentje]

@rcbyr Can I? I thought the only width option was to configure slidesPerView? Given a certain window size and desired slide size, I can calculate a slidesPerView at setup time, but if the window is resized, the full-width slider gets resized to match and so the slides change size given a fixed slidesPerView. (I can update slidesPerView in response to a resize too but that doesn't happen at the same time as the initial redraw! Things like rotating a mobile device show this up quite strongly...)

[rcbyr]

@rowanbeentje

Perhaps I didn't understand your problem in the first place. Can you share code in a code sandbox to explain what you want to do? Would a hook(on resize) help you with your problem?

[rowanbeentje]

@rcbyr Hope I'm still vaguely on-topic and not hijacking this thread too much... 😬

See https://codesandbox.io/s/agitated-euler-7nkfg?file=/index.html for an example - if you have a desired width for slides, it's easy to do that at page load, but harder to react to window size changes in a smooth way. Allowing use of CSS to control the slide sizes would be the most flexible, because then styles and media queries will seamlessly update along with device rotation etc; otherwise, defining a slide width or widths array would be better than having to update slidesPerView in response to changes. A resize hook would help this, but still be delayed from the page resize.

[rcbyr]

Hey @rowanbeentje

I think the title speaks for itself and I'm making progress on that topic. So, a little detour doesn't hurt.

I made a new version with a small change that will help you with your problem. I added the possibility to pass slidesPerView as a function. See my changes: https://codesandbox.io/s/laughing-tree-xfzkx?file=/src/index.js

[rowanbeentje]

@rcbyr Belatedly... that's great, thank you, very nice!

[KevinBatdorf]

Has anyone figured this out or are there any ideas on how to implement this outside of updating the core library?

[rcbyr]

@KevinBatdorf

I have thought about it and have not found a good solution yet. So I rewrote everything new/different to make it work. It is currently in a hidden repository but will be merged with this one soon (I hope next month).

[KevinBatdorf]

@rcbyr Looking forward to it! Thanks

[ruijdacd]

@rcbyr sorry to bust in on you, but do you have an ETA regarding this feature?

This is something that I would really need for a specific use case, where the current API doesn't really fit our needs perfectly

[atharva3010]

Hey! Is this feature being worked on, I have been trying to find a workaround but can't seem to find one! I love using keen-slider and don't want to switch to bloated sliders, just to support this usecase :|

[rcbyr]

Hey @ruijdacd @atharva3010

unfortunately, I didn't have much time in the last couple of months for this project. But now I will work on it again. The feature is already programmed but comes with a couple of necessary changes on the whole slider. (because of that this feature is so delayed). I hope I find enough time to release it this month.

[timfuhrmann]

Any updates on this feature? No pressure - just wondering whether or not I can expect an update within the next month, otherwise I'll have to look for an alternative.

Thanks!

[atharva3010]

@rcbyr Sorry to bother you again, can you please provide an updated ETA regarding this feature?

[rcbyr]

@atharva3010 @timfuhrmann No problem. It's also a bit awkward for me because I've wanted to be done for so long. I've been very busy for a few months and only manage to work on the project a few hours a week. I would estimate that it will take me 20 to 40 hours to finish the next version. What's left is the new implementation of snap, free and free-snap mode (that needs to be done because the old implementation doesn't fit anymore because of the variable widths). It is already implemented but needs some improvements. Time is flying by and I will be very relieved when I finish it.

[atharva3010]

Thank you for the update @rcbyr. It really means a lot.

[Maclay74]

@rcbyr hey, any news regarding this one? It's essentially necessary for many of us :c

[jpcarpenter]

+1. Could really use this feature as well. Is there an updated ETA?

[rcbyr]

it took long enough to close this ticket. The new version is out. There is still a lot to do, but this feature is in.

[toptal0212]

hello.
I want to control keen-slider's perView by screen width in Next.js.