Amazing CSS Carousel with indicators

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amazing CSS Carousel with indicators</title>
  <style>
    #bt_left {
      position: absolute;
      top: 200px;
      left: -50px;
      transform: rotateY(0deg);
      width: 30px;
      cursor: pointer;
    }

    #bt_right {
      transform: rotateY(180deg);
      position: absolute;
      top: 200px;
      right: -50px;
      width: 30px;
      cursor: pointer;
    }

    #box {
      width: 800px;
      height: 500px;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 10px;
    }

    #container {
      width: 800px;
      height: 500px;
      overflow: hidden;
      border: 5px solid maroon;
    }

    .car {
      width: 800px;
      height: 500px;
    }

    #carousel {
      display: flex;
    }

.clone{
position:absolute;
top:0;
right:0;
}

.clone img{
width:200px;
}


  </style>
</head>

<body>

  <div id='box'>

    <img id='bt_left' onclick='sliderLeft()' src='https://1xpto.netlify.app/icons/left.png' />
    <img id='bt_right' onclick='sliderRight()' src='https://1xpto.netlify.app/icons/left.png' />

    <div id='container'>

      <div id='carousel'>
        <img class='car' src='https://1xpto.netlify.app/pics/1.jpg' />
        <img class='car' src='https://1xpto.netlify.app/pics/3.jpg' />
        <img class='car' src='https://1xpto.netlify.app/pics/4.jpg' />
        <img class='car' src='https://1xpto.netlify.app/pics/7.jpg' />
        <img class='car' src='https://1xpto.netlify.app/pics/car.jpeg' />

      </div>
    </div>
  </div>

    <a class='clone' href='https://www.youtube.com/channel/UCqLpDK0eOsG1eEeF9jOUZkw'><img src='https://1xpto.netlify.app/pics/clone.png'/></a>


  <script>
    a = 0;
    i = 0;
    b = 0;
    car = document.getElementsByClassName('car');

    function sliderLeft() {
      if (a == car.length - 1) {
        i = i + 0;
        carousel.style.marginLeft = i + 'px';
      } else {
        i = i - 800;
        a++;
        b--;
        carousel.style.marginLeft = i + 'px';
      }
    }

    function sliderRight() {
      if (b == 0) {
        i = i + 0;
        carousel.style.marginLeft = i + 'px';
      } else {
        i = i + 800;
        b++;
        a--;
        carousel.style.marginLeft = i + 'px';
      }
    }
  </script>
</body>
</htm>