And yes, I want to get rid of the white space accruing on browser. I want the slider to reset instantly instead of showing two white spaces before resetting.
I don’t want the fix to cause any other problems like loading speed issues or issues on mobile, as it works totally fine on mobile
Hope this all makes sense! Thank you so much for the quick reply.
It’s looks like a good solution, yes! But does it affect the speed of my website and does it affect the other versions of my website, like the mobile version or tablet and so on?
TLDR;
Isolate the last slide containing the white space.
Determine what is missing, in this case 2 Cards.
2 Cards width is 300% card width.
Make a internal gride wrapper on the last slide.
Put card in order of loop in the 2 slots.
I am going to try and fix it now! And just to be clear: It does not affect how the slider works on mobile version and so on, and it does not affect loading speed right?
Hi @randomhanscomb
To answer your question about loading performance, this solution does not impact loading performance in any way. Except for adding a few extra lines of code to CSS for new combo and grid class to make slider work the way you want it.
For mobile version, it will have minimal impact, perhaps set Overflow Hide and Max Width = 100% container for mobile as an option if you want to mask the other extended whitespace cards from last card transition.
to all other users reading this:
You can remove whitespce on your carosel to make it infinite coursel style with making “LAST SLIDE CLASS” span the width of white space, and using Grid to fill in the missing cards IN the Order you want them to appear, to make it stretch to the end to show all slides without missing whitespace
Here is resolution to left slide:
Including problem solving steps.