Slide Track for faster css transformations

[PaulSchiretz]

Would it be possible to apply the css transformations to a container rather than applying them to each slide separatly? I think this will drastically increase performance espacially if dealing with a large number of slides.

Maybe pass a container as a parameter on init, something like sliderTrack:

I really enjoy this little library, came over from flickity slider, but i really miss that feature.... Any thoughts or even a solution how to do this? Should be as easy as changing the slidesSetPositions() function to work on a single div instead of the forEach loop...

[rcbyr]

Hey @PaulSchiretz

I've been thinking a bit about your problem. Maybe I could create an alternative renderer that works as you described. But that's not my top priority at the moment. Is the content of your slider static, if not, you could easily create a dynamic slider. I can create a code sandbox for you if you want.

[PaulSchiretz]

Hi @rcbyr thanks for your response, the content of the slider is static basically a couple of ecommerce product cards like 15 to 20 cards. Don't worry it's already working a lot better since version 6, so maybe we can add something like this in the future some time...

[PaulSchiretz]

Actually if i think about it, if you could set up a sandbox that would be nice, i'm just not sure if i have time for it anytime soon... you know, i'm a c++ dev just doing web stuff in my spare time.

[rcbyr]

Hey @PaulSchiretz

I have added an example on the home page. https://keen-slider.io/examples#dynamic-content

You could also try the "renderMode" option and set it to "performance". Maybe that already solves your problem.

[PaulSchiretz]

@rcbyr thanks for the interesting example! I'm already using the performance mode and yes it's better, but i still think translating a container instead of each slide would be faster. Cause translating 20 elements is way slower than translating one container with the 20 elements in it. I didn't mean to change anything with the logic of the slides, they should still be 20 slides and act as they do now. But instead of applying the same translation to each of them just translate the container element. I wouldn't need anything dynamic or loop or similar....

[rcbyr]

I think that was a misunderstanding. As I said, I could write an alternative renderer to accomplish what you described, but that probably won't happen anytime soon because I have some other priority tasks.

[klausXR]

Plus one for this.

On a large page with 12+ slides the performance is not as smooth as in the demos.

I think applying transformations to the container as opposed to slides will improve this a lot.

[PaulSchiretz]

Hi @rcbyr, hope you’re doing fine! Any news on that one?

[rcbyr]

Hey @PaulSchiretz

I will come to this issue next, if no critical bugs appear.

[rcbyr]

@PaulSchiretz

I don't know if the problem is still relevant for you, but I made a change in v6.8.0 that improves the performance with complex markups. Maybe this already helps you.

[PaulSchiretz]

Hi @rcbyr, thanks for the update, yes performance is quiet good now!! Although i still think it would still be an improvement to move all slides at once, i'm happy with the performance and overall with the slider! Thanks for the great work!

Cheers, Paul

[rcbyr]

Thanks for using the library and the feedback. I haven't forgotten, but still thinking about the best solution.