How to get CSS block margin as a percentage using jquery?

Question

css

There is a slider block for which margin is not initially set, I get the margin value:

var currentMargin= $(".slider").css("marginLeft"); // The value comes in pixels - "0px". Next, the resulting value is truncated, reduced to a number, -100 is subtracted, and the % sign is added.

Then I set the shift value as a percentage:
$(".slider").css("margin-left" , currentMargin); // Thus, the picture is shifted to the left by -100%, everything is fine.

However, when I try to get the margin value again, for another shift of -100% and show the next slide, it comes again in pixels, although it is already set in% i.e. at different screen resolutions, a different value in pixels is obtained, which is not good.

Answer 1

Gradient variant: https://codepen.io/suberg/pen/RMvdew

Answer 2

this light green is probably just white with translucency? and on a white background it is not visible