Горизонтальная рулетка на чистом JS как сделать?

Question

KraymiKrons @KraymiKrons

JavaScript

Горизонтальная рулетка на чистом JS как сделать?

Не могу сделать горизонтальную рулетку с бесконечной прокруткой до выпавшего рандомного элемента.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex">
    <title>Roulette</title>
    <style type='text/css'>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            display: inline-block;
            float: left;
        }

        .window {
            overflow: hidden;
            position: relative;
            width: 25000px;
            height: 143px;
            right: 0px;
        }

        .wraper {
            position: relative;
            margin: auto;
            margin-top: 250px;
            width: 408px;
            overflow-x: hidden;
            overflow-y: hidden;
            border: 4px solid #1a96b7;
            border-radius: 2px;
        }

        .list {
            position: relative;
            margin-left: 230;
            display: inline-block;
        }

        .list li {
            border: 4px solid transparent ;
        }
        .list li img {
            width: 130px;
            height: 130px;
        }

        .arrowup {
            position: absolute;
            bottom: 0;
            right: 200px;
            z-index: 1;
            width: 0;
            height: 0;
            border-bottom: 20px solid #1a96bf;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }

        .arrowdown {
            position: absolute;
            top: 0;
            right: 200px;
            z-index: 1;
            width: 0;
            height: 0;
            border-top: 20px solid #1a96bf;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    </style>

</head>
<body>
<div class="wraper">
    <div class="arrowup"></div>
    <div class="arrowdown"></div>
    <div class="window">
        <ul class="list">

        </ul>
        <ul class="list">
            <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Strawberry.png" alt=""></li>
            <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Cherry.png" alt=""></li>
            <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Apple.png" alt=""></li>
            <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Lemon.png" alt=""></li>
            <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Kiwi.png" alt=""></li>
            <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Pear.png" alt=""></li>
        </ul>
    </div>
</div>
<p style="text-align: center">
    <button class="button">Кнопка</button>
<div class="win">
    <ul>

    </ul>
</div>






<script>
    (function() {
        for (var i = 0; i < 3; i++) {
            Array.from(document.getElementsByClassName("list")).forEach(e => e.append())
        }
        document.getElementsByClassName('button')[0].addEventListener('click', () => {
            document.getElementsByClassName('window')[0].style.right = 0;
            document.querySelectorAll('.list li')[0].style.border = "4px solid transparent";
            const x = Math.floor(Math.random() * (100 - 50 + 1)) + 50;
            document.getElementsByClassName('list')[1].getElementsByTagName('li')[x].style.border = "4px solid #00ba00";
            document.getElementsByClassName('window')[0].style.right = ((x*130)+(x*8-12)-119)+"px";
        });


    }());
</script>

</body>

</html>

Вот код на Jquery рабочий полностью, а мой код выше не работает не знаю как конвертировать в чистый JS

$(document).ready(function () {
            for (i = 0; i < 3; i++) {
                $(".list li").clone().appendTo(".list");
            }
            $('.button').click(function () {
                $('.window').css({
                    right: "0"
                })
                $('.list li').css({
                    border: '4px solid transparent'
                })
                function selfRandom(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }
                var x = selfRandom(50, 100);
                $('.list li:eq('+x+')').css({
                    border:'4px solid #00ba00'
                })
                $('.window').animate({
                    right: ((x*130)+(x*8-12)-119)
                }, 10000);
            });
        });