I couldn’t get the buttons to work, I want them to pass the images

Question

 <div class="carousel">
        <div class="carouselbox">
                <img src="./imagem/mini1.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini2.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini3.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini4.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini5.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini6.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini7.jpg" class="item" align="left" border="5" />
                <img src="./imagem/mini8.jpg" class="item" align="left" border="5" />
        </div>
        <button type="button" class="switchRight sliderButton" onclick="sliderScrollRight()">
            <i class="fas fa-angle-right"></i>
        </button>
        <button type="button" class="switchLeft sliderButton" onclick="sliderScrollLeft()"> 
            <i class="fas fa-angle-left"></i>
        </button>
    </div>

.carousel {
    height: 250px;
    width: 100%;
    position: relative;
  }
  .carousel .switchLeft,
  .carousel .switchRight {
    margin-top: 25px;
    color: white;
    font-weight: bold;
    height: 85%;
    width: 45px;
    line-height: 200px;
    font-size: 25px;
    text-align: center;
    background-color: rgb(26, 25, 25);
    opacity: 0.7;
    font-family: sans-serif;
    top: 0;
    z-index: 3;
  }
  
  .carousel .switchLeft {
    position: absolute;
    left: 0px;
  }
  
  .carousel .switchRight {
    position: absolute;
  
    right: 0px;
  }
  
  .carouselbox {
    height: 250px;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    padding-bottom: 10px !important;
    display: flex;
    align-items: center;
  }