Make circle radius Based on viewportwidth (vw)

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:

enter image description here

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/

+4
2

250. 250 13.02% 1920, 1920 , . , 13.02% .

, :

radius = Math.round10( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );

Math.round10(); // rounds to the nearest decimal. 
$(window).width(); // is the width of the window. In my case 1920px
0.1302 is 13.02% // when you multiply it with something.

, 13.02vw

0

,

Math.tan( Math.PI / itemLength )

, itemLength, . . tan .

250 . , 250 vw . , , - :

radius = Math.round( (250 * (vw/default_vw) ) / Math.tan( Math.PI / itemLength ) ); 
0

Source: https://habr.com/ru/post/1619857/


All Articles