Can someone help me with the slide show?

Question

People appreciate if anyone can help me, I’m starting the course now and I don’t have much experience yet. I’m doing a job and I have a slide with three images that need to run as carousel and with buttons (previous and next). As in the code below I managed to do similar, but with Type radio buttons. wanted to replace the radios by two buttons at the ends with ">" for next and "<" for previous. and the carousel function I could not do.

HTML

    <li>
          <input type="radio" id="slide1" name="slide" checked>
          <label for="slide1"></label>
          <img src="imgs/1.jpg" />
    </li>
    <li>
          <input type="radio" id="slide2" name="slide">
          <label for="slide2"></label>
          <img src="imgs/2.jpg" />
    </li>
    <li>
          <input type="radio" id="slide3" name="slide">
          <label for="slide3"></label>
          <img src="imgs/3.jpg" style="
    height: 400px;">
    </li>
</ul>


CSS

```* { margin: 0 auto; padding: 0 auto; }

.slider {
    display: block;
    height: 400px;
    width: 600px;
    margin: auto;
    margin-top: 20px;
    position: relative;
}

.slider li {
    list-style: none;
    position: absolute;
}

.slider img {
    margin: auto;
    height: 100%;
    width: 100%;
    vertical-align: top;
}
.slider input {
    display: none;
}
.slider label {
    background-color: #000;
    bottom: 5px;
    cursor: pointer;
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
    z-index: 10;
}

.slider li:nth-child(1) label {
    left: 10px;
}

.slider li:nth-child(2) label {
    left: 40px;
}

.slider li:nth-child(3) label {
    left: 70px;
}
.slider img {
    opacity: 0;
    visibility: hidden;
}

.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}


pessoal que puder dar uma opinião eu agradeço muito... Abraços 

Answer 1

You need to create two buttons to change slide and with javascript you can show and hide the slides.

<ul class="slider">
    <li class="slide">
          <input type="radio" id="slide1" name="slide" checked>
          <label for="slide1"></label>
          <img src="imgs/1.jpg" />
    </li>
    <li class="slide">
          <input type="radio" id="slide2" name="slide">
          <label for="slide2"></label>
          <img src="imgs/2.jpg" />
    </li>
    <li class="slide">
          <input type="radio" id="slide3" name="slide">
          <label for="slide3"></label>
          <img src="imgs/3.jpg" style="
    height: 400px;">
    </li>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</ul>

<style>
    * { margin: 0 auto; padding: 0 auto; }

    .slider {
        display: block;
        height: 400px;
        width: 600px;
        margin: auto;
        margin-top: 20px;
        position: relative;
    }

    .slider li {
        list-style: none;
        position: absolute;
    }

    .slider img {
        margin: auto;
        height: 100%;
        width: 100%;
        vertical-align: top;
    }
    .slider input {
        display: none;
    }
    .slider label {
        background-color: #000;
        bottom: 5px;
        cursor: pointer;
        display: block;
        height: 10px;
        position: absolute;
        width: 10px;
        z-index: 10;
    }

    .slider li:nth-child(1) label {
        left: 10px;
    }

    .slider li:nth-child(2) label {
        left: 40px;
    }

    .slider li:nth-child(3) label {
        left: 70px;
    }

    .slider li input:checked ~ img {
        opacity: 1;
        visibility: visible;
        z-index: 10;
    }

    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    .slide {
      display: none;
    }
</style>

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("slide");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }
      slides[slideIndex-1].style.display = "block";
    } 
</script>