I have a free jQuery image gallery in which I am trying to make some changes to fit my project.
The gallery is a rotating circle with images.
The radius of the circle is defined as follows:
radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
However, I need to create a new radius based on viewportwidth (vw)
Can someone help me fit right?
I would also really appreciate it if someone could help me understand what is happening in the above code.
Here is the context for this line of code:
w = $(window);
container = $( '#contentContainer' );
carousel = $( '#carouselContainer' );
item = $( '.carouselItem' );
itemLength = $( '.carouselItem' ).length;
fps = $('#fps');
rY = 360 / itemLength;
radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
https://jsfiddle.net/mxp5svjx/
here is the image as requested:

The main problem is when I resize the window, then the radius of the circle remains the same.
here is a working demo:
http://codepen.io/johnblazek/full/nceyw/