Hello,
I have been using the animation function to create a custom slider nav bar, showing slider position.
Works perfectly, however it is not responsive to window size, as my animation function uses a constant pixel value. When the window becomes smaller, the container scales down and no longer is size 890px, but my animate function still moves the same pixel size (890/4px), which means it moves out of the screen.
My current function:
$(‘.bar’).animate({left: “+=” + 890/4 + “px”});
Is it possible to easily animate according to the size of the parent container. I want the div block to move 25% right/left of its parent container size, every time slider arrow is pressed.
I was thinking of something like: $(‘.bar’).animate({left: “+=” + 25 + “%”}); …but this doesnt work.
Ps. I know that I could possibly achieve this with if/or statements but really hoping I can just have one simple animate function, using percentage of parent element as unit.
My site:
https://josephs-stupendous-project-50563f.webflow.io/
Thanks in advance :))))