JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divv">
		<ul id="carusel">

		</ul>
	</div>

    <p></p>
    <input name="" type="button" value="go">

CSS

li{
   margin: 0px;
   width: 60px; height:50px;
   display: inline-block;
   text-align: center;
   color: rgba(255, 255, 255, 1);
    font-size: 24px;
    font-weight: bold;
  }
  
  #carusel {
    position:relative; top: 0px; left:0px; display:block;
    width: 60px; height:0px;
    padding: 0px; margin: 0px;
  }
  .divv{
     overflow:hidden; width: 540px; height:50px; position: relative; left: 100px
  }
#box img {
	display: block;

JavaScript

$(function () {
    var arr = ['11',12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29], carusel = $('#carusel');
    function rand(min, max, integer) {
      var r = Math.random() * (max - min) + min;
      return integer ? r|0 : r;
    }
    function rgbColor() {
    	return 'rgb(' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ')';
    }
    $.each(arr,function(indx, el){
          $('<li/>',{text : el, data : {i : indx},css : {'background-color' : rgbColor()}}).appendTo(carusel)
          carusel.width('+=60')
          });
   function lotto()
    {
    var n = rand(0 ,arr.length, true);

        r = rand(2 ,5, true);
       
        carusel.stop();
    (function go() {
        carusel.animate({
            left: '-=50'
        }, 100, function () {
            var li = $('li:first');
                data = li.next().data('i');
            if (data == n) r--;


            li.appendTo(carusel)
            carusel.css({
                left: '0px'
            });
            r && go()
        })
    }())


    }
    $('[type="button"]').on({click : lotto})
	
})