title: How to get roll animation to work (roulette)
body: <p>I'm trying to do roll/roulette animation with no results.</p>
  
  <pre><code>&lt;div class="roll"&gt;
      &lt;img src="image.png" id="1" /&gt;
      &lt;img src="image.png" id="2" /&gt;
      &lt;img src="image.png" id="3" /&gt;
      &lt;img src="image.png" id="4" /&gt;
      &lt;img src="image.png" id="5" /&gt;
      &lt;img src="image.png" id="6" /&gt;
      &lt;img src="image.png" id="7" /&gt;
      etc ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Images are inline so it would look like this  </p>
  
  <p><a href="https://i.stack.imgur.com/PDzJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PDzJJ.png" alt=""></a>
  But instead of colors there will be images</p>
  
  <p><a href="https://i.stack.imgur.com/3eut3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3eut3.gif" alt="enter image description here"></a></p>
  
  <p>I have array with players </p>
  
  <pre><code>var players = {
      1: "Player 1",
      2: "Player 2",
      3: "Player 3"
  }
  </code></pre>
  
  <p>When the roll stops, the line in the middle will pick the winner and get the id.  </p>
  
  <p>When there's no more images to roll it will start over again</p>
  
  <p>I'm not asking for source code. Just good instructions how do I get started with this.</p>