Hi all. I’m using the Moving Boxes plugin, and have adapted it to be a full-width image slider. It’s responsive on load, but I’m having trouble getting it to respond on resize too. It seems like the widths become fixed to a specific value on load, and the percentage widths no longer apply.
Any help would be appreciated, as I’m crap with JS. Thanks in advance!
Hi, thanks for your input. It makes sense to call the same function on resize, but it isn’t working unfortunately (currently uploaded here).
I did come across something unexpected which may be related. It happens when I remove the original function which calls movingboxes on load, and keep the code which calls it on resize. Naturally, on load no JS is loaded. On resize however, it loads the JS as soon as you start resizing, but then immediately stops being responsive. (currently uploaded here)
It seems like as soon as the JS is loaded, the width values written in the CSS are overwritten by the JS with fixed values.
Ah yes of course, you are right. It’s finding the width of the slide which of course doesn’t change since it’s an inline style. That will unfortunately require a change to the plugin itself. Check this out: https://github.com/CSS-Tricks/MovingBoxes/issues/49
Cool, almost there. I’ve used the code below taken from that link, and it works great for the first slider, but not on any of the following sliders. All sliders have the class name .slider, so I don’t know why it’s only being applied to one of them.