Carousel does not work on android

Question

wanted to know what’s wrong with that Carousel that on the desktop works perfectly, and in any other mobile device does not work

HTML

<div class="box">
    <h1>
        <div class="b-slide">
           <span id="prev"><i class="fas fa-angle-double-left"></i></span>
           <span id="next"><i class="fas fa-angle-double-right"></i></span>
        </div>
    </h1>

    <div id="itens" style="overflow:hidden;">
        <ul>
            <li><a href=""><div class="destaque">1</div></a></li>
            <li><a href=""><div class="destaque">2</div></a></li>
            <li><a href=""><div class="destaque">3</div></a></li>
            <li><a href=""><div class="destaque">4</div></a></li>
            <li><a href=""><div class="destaque">5</div></a></li>
            <li><a href=""><div class="destaque">6</div></a></li>
            <li><a href=""><div class="destaque">7</div></a></li>
            <li><a href=""><div class="destaque">8</div></a></li>
        </ul>
    </div>
</div>

JQUERY

$(document).ready(function(){

  var speed = 25000;
  var run = setInterval('rotate()',speed);

  var item_width = $('#itens li').outerWidth();
  var left_value = item_width * (-1);

  $('#itens li:first').before($('#itens li:last'));

  $('#itens ul').css({'left' : left_value});


  $("#prev").click(function(){
    var left_intend = parseInt($('#itens ul').css('left')) + item_width;
    $('#itens ul').animate({'left':left_intend},200, function(){
        $('#itens li:first').before($('#itens li:last'));
        $('#itens ul').css({'left' : left_value});
    });
    clearInterval(run);
    run = setInterval('rotate()',speed);
  });

  $("#next").click(function(){
    var left_intend = parseInt($('#itens ul').css('left')) - item_width;
    $('#itens ul').animate({'left':left_intend},200, function(){
        $('#itens li:last').after($('#itens li:first'));
        $('#itens ul').css({'left' : left_value});
    });
    clearInterval(run);
    run = setInterval('rotate()',speed);
  });

  $('#itens').hover(
    function(){
      clearInterval(run);
      disableScroll();
  },
  function(){
    clearInterval(run);
    run = setInterval('rotate()',speed);
    enableScroll();
  });

});

var keys = {37:1, 38:1, 39:1, 40:1};

function preventDefault(e){
  e = e || window.event;
  if(e.preventDefault)
    e.preventDefault();
  e.returnValue = false;
}

function preventDefaultForScrollKeys(e){
  if(keys[e.keyCode]){
    preventDefault(e);
    return false;
  }
}

function disableScroll(){
  window.onwheel = preventDefault;
  window.ontouchmove = preventDefault;
  document.onkeydown = preventDefaultForScrollKeys;
}

function enableScroll(){
  window.onwheel = null;
  window.ontouchmove = null;
  document.onkeydown = null;
}
function rotate(){
  $('#next').click();
}

CSS

.box{
  position: relative;
  float: left;
  margin: 0% 0% 2% 0%;
  padding: 0% 0% 2% 0%;
  border-bottom: 1px solid #ebebeb;
}
.box:first-child{
  display: inline-block;
  margin: 0% 0% 2% 0%;
}
#itens ul{
  position: relative;
  display: flex;
  margin: 0px;
  padding: 0px;
  float: left;
  width: 900px;
  height: 260px;
  max-height: 260px;
  height: auto;
}
li .destaque{
  margin: 0px 10px 0px 0px;
  width: 164px;
  height: 260px;
  border: 1px solid transparent;
  background-color: #4DAE52;
  border-radius: 3px;
}
li:last-child .destaque{margin: 0px;}