How to get roll animation to work (roulette)
<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>