JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>lol</title>
</head>

<body>
  <div class="banner">
    <ul id="banner_ul">
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=1">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=2">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=3">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=4">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=5">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=6">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=7">
        </a>
      </li>
      <li class="banner_li">
        <a class="banner_a">
          <img src="https://picsum.photos/300/200/?image=8">
        </a>
      </li>
    </ul>
  </div>
</body>

</html>

CSS

.banner{
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
#banner_ul{
    width: 2400px;
    height: 100%;
    padding: 0;
    transition: all 2s;
}
.banner_li{
    list-style-type: none;
    float: left;
}

JavaScript

var count = 0;
var isgo = false;
var timer;

var banner_ul = document.getElementById("banner_ul");
var banner_li = document.getElementsByClassName("banner_li");

showtime();
function showtime() {
  timer = setInterval(function () {
		var returnToFirst = count === banner_li.length - 1;
    count = returnToFirst ? 0 : count + 1;

    banner_ul.style.transform = "translate(" + -300 * count + "px)";
  }, 3000);
}