如何在轮播中的上一个和下一个按钮中显示上一个和下一个图像

Question

我正在制作一个投资组合网站，上面有一个轮播展示我的图片。我已经成功编码了轮播工作。现在，我有一个障碍：我想要“下一个”和“上一个”按钮显示下一张和上一张图像。

现在，似乎是我的代码，不知道照片在哪里。在这种情况下，我不能要求他们。如何解决呢？我需要给每张照片一个独特的类，还是可以通过某种方式使它自动化？

This photo illustrates my question

 <div class="cointainer  active">
    <ol class="content">


        <li class="slides"> <img src="image_01.jpg" height="500px">
            <div>
                <div class="date">
                    <p>
                    &copy; August Hugo <br>
                    Avelon <br>
                    26-09-19
                    </p>    
                </div>  
                <div class="desctiption">
                    <p> 

                    </p>

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



        <li class="slides"> <img src="image_02.jpg" height="500px">
            <div>
                <div class="date">
                    <p> 
                    &copy; August Hugo <br>
                    Avelon <br>
                    26-09-19
                    </p>    
                </div>  
                <div class="desctiption">
                    <p>

                    </p>

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



        <li class="slides"> <img src="image_03.jpg" height="500px" class="1">
            <div>
                <div class="date">
                    <p> &copy; August Hugo <br>
                    Avelon <br>
                    26-09-19 </p>   
                </div>  
                <div class="desctiption" align="left">
                    <p> 
                    </p>

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



        <li class="slides"> <img src="image_04.jpg" height="500px">
            <div>
                <div class="date">
                    <p> &copy; August Hugo <br>
                    Avelon <br>
                    26-09-19 </p>   
                </div>  
                <div class="desctiption" align="left">
                    <p> 

                    </p>

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


    </ol>
</div>




<!--Next Button-->
    <button class="next" onclick="plusDivs(+1)">
        <img height="500px" width="80px">
    </button>

    <!--Prev Button-->
    <button class="prev" onclick="plusDivs(-1)">
        <img height="500px" width="80px">
    </button>


   var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

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