Адаптация рулетки под ширину

function doubleRoll(winner) { var rollPositions = { 0: -10178, 1: -10240, 2: -10366, 3: -10492, 4: -10618, 5: -10744, 6: -10870, 7: -9676, 8: -9802, 9: -9928, 10: -10054, 11: -10304, 12: -10430, 13: -10556, 14: -10682, 15: -10808, 16: -10934, 17: -9738, 18: -9864, 19: -9990, 20: -10116 } var roll = rollPositions[winner]; $('.roulette_table').css('transition', '10s cubic-bezier(.25,0,.5,1)'); $(".roulette_table").css({ "margin-left": "" + roll + "px", }); setTimeout(function() { $('.roulette_table').css('transition', 'none'); $(".roulette_table").css({ "margin-left": "" + (roll + 9238.5) + "px", }); }, 10500); } #round_draw_pointer_mid { position: absolute; top: 0; margin: auto; width: 5px; height: 100%; background: #000; } .roulette_option { text-align: center; color: #fff; display: inline-block; width: 60px; height: 80px; margin-left: -1.6px; line-height: 25px; vertical-align: middle; border-top: 2px solid rgba(0,0,0,.5); } .roulette_table { width: 15000px; height: 150px; overflow-y: hidden; position: absolute; } #round_draw_pointer { height: 100%; width: 2px; position: absolute; left: 0; right: 0; margin: auto; z-index: 99; } .roulette_option span { font-size: 18px; font-weight: bold; background: rgba(255,255,255,.08); display: block; } .roulette_table_holder { width: 100%; /* если указать 810px, будет работать как надо! */ height: 80px; overflow: hidden; position: relative; }

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

0

1

11

2

12

3

13

4

14

5

15

6

16

7

17

8

18

9

19

10

20

Такс, значит задача стоит следующая.. есть рулетка в ней есть 20 разных позиций. Но так получилось, что делал эту рулетку под ширину 810px, а надо чтобы она растягивалась на весь экран те width = 100% Если поменять в стилях в селекторе .roulette_table_holder указать параметр width = 100%;, то рулетка будет работать как надо, но если указано 100% (как и надо), то она не адаптивна, и выпадает совсем другое число.

Ответ

В итоге переписал весь код. И сделал так:
function doubleRoll(winner) { if ($(".roulette_table").length > 0) { var number = winner; if (number == 0) { numberCalc = 0; } else if (number > 10) { numberCalc = 2 * (number - 10); } else { numberCalc = 2 * (number) - 1; } var numberMargin = 60 * numberCalc; var randPos = Math.floor(Math.random() * 52) + 6 var centerMargin = -21 * 60 + 60 * 7 + $("#page_content").width() / 2; var startMargin = centerMargin - numberMargin - randPos - 5458; $(".roulette_table").css('left', startMargin + 'px').css('transition', '10s cubic-bezier(.25,0,.5,1)');
} setTimeout(function() { $('.roulette_table').css('transition', 'none'); $(".roulette_table").css({ "left": ""+ (startMargin + 5040) +"px", }); }, 10500); }