carousel does not work on android

I wanted to know what's wrong with this carousel that works perfectly on the desktop, and on any other mobile device it 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;}