How do i create an horizontal slot machine effect?

I have a task that i need to to.

I need an horziontal slot machine, with random selection of the items except 2 of them ( so if there are 4 items, the spin should stop at only 2 of them) and when the spinning stops at item, automatically it should redirect to another page.

this is the code:

$(document).ready(function () {

    // Clone the first element and append it to the end of the list
    var list = $('#slotmachine>ul:first');
    var firstItem = list.find('li:first');
    firstItem.clone().appendTo(list);

    function moveTo(val) {
        val = -val % 1200;
        if (val > 0) val -= 1200;
        $('#slotmachine').css({
            left: val
        });
    }

    function spin(count) {
        $('#slotmachine').stop().animate({
            left: -1200
        }, 2000, 'linear', function () {
            if (count == 0) {
                var slot = Math.floor(Math.random() * 4),
                    left = -slot * 200,
                    time =  2000 * slot / 4;
                console.log(count, slot, top, time)
                $(this).css({
                   left: 0
                }).animate({
                    left: left
                },time, 'easeOutQuad')
            } else {
                $(this).css({
                    left: 3
                })
                spin(count - 1)
            };
        });
    }
    $('#start').click(function () {
        $('#slotmachine').css({
            left: 0
        }) 
        spin(1)
    });

    $('#moveTo').click(function () {
        moveTo($('#pos').val());
    });
});

#viewbox {
   display:flex;
    width: 300px;
    height: 200px;
    border: solid 1px #000;
    position: relative;
}
#viewbox .wrapper {
    position: relative;
}
#viewbox ul {
  display:flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
#viewbox li {
    display: block;
    width: 300px;
    height: 200px;
    text-align: center;
    font-size: 170px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewbox">
    <div class="wrapper" id="slotmachine">
        <ul>
            <li style="background:#f00">1</li>
            <li style="background:#ff0">2</li>
            <li style="background:#0f0">3</li>
            <li style="background:#0ff">4</li>
  
        </ul>
    </div>
</div>
<input type="button" value="start" id="start" />|
<input type="button" value="move To" id="moveTo" />
<input type="text" id="pos" value="0" size="5" />

Right now is not working as a want it...

How can i achive this?