问带有自动播放的滑块以及带有CSS HTML JS的下一个和上一个箭头

EN

    /*progress bar effect*/

    @keyframes loading {
      0% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(100%);
      }
    }

    /*autoplay effect*/
    @keyframes fade {
      0% {
        opacity: 1
      }
      45% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
      95% {
        opacity: 0
      }
      100% {
        opacity: 1
      }
    }

    @keyframes fade2 {
      0% {
        opacity: 0
      }
      45% {
        opacity: 0
      }
      50% {
        opacity: 1
      }
      95% {
        opacity: 1
      }
      100% {
        opacity: 0
      }
    }


    /*Section slider*/

    .slider {
      width: 100%;
      height: 550px;
      margin: 20px auto;
      position: relative;
    }

    .slide1,
    .slide2 {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .slide1 {
      background: url('images/bg1.jpg') no-repeat center;
      background-size: cover;
      animation: fade 30000s infinite linear;
      -webkit-animation: fade 30000s infinite linear;
    }

    .slide2 {
      background: url('images/bg2.jpg') no-repeat center;
      background-size: cover;
      animation: fade2 30000ms infinite linear;
      -webkit-animation: fade2 30000ms infinite linear;
    }


    /*progress bar*/

    .progress-bar {
      position: absolute;
      bottom: -76px;
      left: 0px;
      height: 80px;
      width: 100%;
      background: color: rgba(192, 194, 192, 0.8);
      border-radius: 0 0 1px 1px;
      box-shadow: inset 0px 11px 14px -10px #737373, inset 0px -11px 8px -10px #CCC;
    }

    .loaded {
      height: 4px;
      width: 100%;
      background: #5cadd3;
      animation: 15000ms infinite linear loading normal;
      transform-origin: 0%;
    }


    /*Slider buttons left or right*/

    .slider #button_left {
      position: absolute;
      top: 45%;
      left: 0px;
      background-color: rgba(70, 70, 70, 0.6);
      width: 35px;
      height: 70px;
      border-radius: 0px 50px 50px 0px;
    }

    .slider #button_right {
      position: absolute;
      top: 45%;
      right: 0px;
      background-color: rgba(70, 70, 70, 0.6);
      width: 35px;
      height: 70px;
      border-radius: 50px 0px 0px 50px;
    }

    #button_left:hover,
    #button_right:hover {
      transition: .3s;
      background-color: rgba(99, 99, 99, 1);
      color: #ffffff;
    }


    /*left and right arrows for slider with font-awesome*/

    .fas.fa-chevron-left {
      position: absolute;
      left: 0;
      top: 30%;
      margin-left: 5px;
      color: #fff;
      font-size: 25px;
    }

    .fas.fa-chevron-right {
      position: absolute;
      right: 0;
      top: 30%;
      margin-right: 5px;
      color: white;
      font-size: 25px;
    }

    <section id="slideshow">
      <div class='slider'>
        <div class='slide1'>
          <div class="text-slider">
            <h1><span class="textblue">WEBAGENCY</span>: lorem ipsum <br> lorem ipsum</h1>
            <p> lorem ipsum</p>
            <a href="#"> lorem ipsum</a>
          </div>
        </div>

        <div class='slide2'>
          <div class="text-slider">
            <h1><span class="textblue">WEBAGENCY</span>: lorem ipsum <br> lorem ipsum</h1>
            <p> lorem ipsum</p>
            <a href="#services"> lorem ipsum</a>
          </div>
        </div>
        <!--<div class="progress-bar"></div>-->
        <div class="progress-bar">
          <div class="loaded"></div>
        </div>
        <a href="images/bg1.jpg" id="button_left"><i class="fas fa-chevron-left"></i></a>
        <a href="images/bg2.jpg" id="button_right"><i class="fas fa-chevron-right"></i></a>
      </div>
    </section>