адаптация рулетки js

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); 
}

.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_option span { 
    font-size: 18px; 
    font-weight: bold; 
    background: rgba(255,255,255,.08); 
    display: block; 
} 
.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_table_holder { 
    width: 100%; /* если указать 810px, будет работать как надо! */ 
    height: 80px; 
    overflow: hidden; 
    position: relative; 
} 
#round_draw_pointer_mid { 
    position: absolute; 
    top: 0; 
    margin: auto; 
    width: 5px; 
    height: 100%; 
    background: #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="roulette_table_holder"> 
  <div id="round_draw_pointer"> 
    <div id="round_draw_pointer_mid"></div> 
  </div> 
  <div class="roulette_table"> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
    <div class="roulette_option" style="background: #5FAE63;"><span>0</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>1</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>11</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>2</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>12</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>3</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>13</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>4</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>14</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>5</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>15</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>6</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>16</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>7</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>17</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>8</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>18</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>9</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>19</span></div> 
    <div class="roulette_option" style="background: #bc5652;"><span>10</span></div> 
    <div class="roulette_option" style="background: #1b1e27;"><span>20</span></div> 
  </div> 
</div> 
<button onclick="doubleRoll(1);">SPIN NUMBER 1</button><br> 
<button onclick="doubleRoll(2);">SPIN NUMBER 2</button><br> 
<button onclick="doubleRoll(3);">SPIN NUMBER 3</button><br> 
<button onclick="doubleRoll(4);">SPIN NUMBER 4</button>