I'm creating a carousel, using a div for the outer container and a ul for the inner container. The ul is wider than the div, and the div uses overflow-x: hidden to hide the excess of the ul, as shown below.

My question is, how do I find the actual width and position of the ul?

Using getBoundingClientRect(), I get numbers that don't seem to make sense. For example, the .right value when the ul is fully displayed is greater than the screen width. The width always returns the same as the width of the parent div.

How do I find out about the 'hidden' portion of the inner ul?

Thanks in advance!