Slider breakpoints resize issue

[Brad_Leeming]

Hello, I’ve found a bug on my site regarding the slider at the top of this page. When the browser window is resized to a different breakpoint (while the slider is transitioning between slides) it ends up looking broken (see image below).

You will struggle to recreate this in the designer, but if you open this staging url https://fisheries.webflow.io/ then resize the browser window from desktop through to tablet and mobile you should see the problem. Please note, that if the page is refreshed at each breakpoint, there is no issue.

I think this is something to do with the image renditions created by webflow, as it gets confused when switching breakpoints and loads in new different sized images, but keeps the ones it already loaded on the previous slider rotations? then the translate X values that are added (which you can see on the published site through inspector) to make the banner transition don’t marry up, causing this broken display. I could be wrong on this though. Any ideas on how to fix this? Thanks

read only link:
https://preview.webflow.com/preview/fisheries?utm_medium=preview_link&utm_source=designer&utm_content=fisheries&preview=54ddedf1b82726f4b153ac7229e12c25&mode=preview

[mikeyevin]

I see the issue, however it appears like it fixes itself when the slide animates after the browser has been resized. Thankfully this isn’t something a normal user would be doing (resizing the window through breakpoints) so I wouldn’t worry too much about tracking down the issue.

That said, since you’re currently using Webflow’s native Slider element your fixes are going to be somewhat limited, however you could always try integrating a third party slider like Slick or SwiperJS to see if that doesn’t smooth out the issues your seeing