Comments (22)
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
from keen-slider.
@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.
from keen-slider.
+1. Could really use this feature as well. Is there an updated ETA?
from keen-slider.
@rcbyr hey, any news regarding this one? It's essentially necessary for many of us :c
from keen-slider.
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.
from keen-slider.
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.
from keen-slider.
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
from keen-slider.
@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
from keen-slider.
Thank you for the update @rcbyr. It really means a lot.
from keen-slider.
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?
from keen-slider.
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?
from keen-slider.
@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...)
from keen-slider.
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?
from keen-slider.
@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.
from keen-slider.
@rcbyr Belatedly... that's great, thank you, very nice!
from keen-slider.
Has anyone figured this out or are there any ideas on how to implement this outside of updating the core library?
from keen-slider.
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).
from keen-slider.
@rcbyr Looking forward to it! Thanks
from keen-slider.
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 :|
from keen-slider.
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!
from keen-slider.
@rcbyr Sorry to bother you again, can you please provide an updated ETA regarding this feature?
from keen-slider.
hello.
I want to control keen-slider's perView by screen width in Next.js.
from keen-slider.
Related Issues (20)
- Lazy loading when slides.perView > 1
- scrolling issue on mobile with scroll variant of "data-keen-slider-scrollable".
- SyntaxError: Named export 'useKeenSlider' not found.
- [Angular] ReferenceError: document is not defined
- Keen-slider doesn't work properly with vue-transition.
- Slider Switches Slide After Very Short Drag
- Click while sliding with free-snap mode HOT 1
- [VanillaJS][v5] translate3d values for slides are sometimes wrong
- How to avoid skipping slides when mouse scrolling? HOT 1
- moveToIdx does not work in certain conditions HOT 3
- Dynamic content makes slides jumping between loops
- Scrolling to a Specific Element in a Multi-Element Slide
- Weird Resize Happening to All Slides HOT 1
- Control end animation speed
- Autosroll issue
- Please update documentation
- Mobile URL bar resizing causes autoplaying carousel jump to the edge of a slide on initial scroll
- Gutenberg Block: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
- Carousel card effect
- Any way to stop or pause autoplay?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from keen-slider.