Slider Not Showing All Images

Question

I don't know why my slider buttons are not working and they are not showing all images too....bruhhhhhhhh someone pls help

                            <div class="slides">
 <img src="../page_images/1.jpeg" width="100%" height="100%"/>
                            </div>    
                            <div class="slides">
 <img src="../page_images/2.jpeg" width="100%" height="100%"/>
                            </div>
                            <div class="slides">
 <img src="../page_images/3.jpeg" width="100%" height="100%"/>
                            </div>
                     <div class="slides">
  <img src="../page_images/4.jpeg" width="100%" height="100%"/>
                                </div>

&#10094 &#10095

and the java script

        var index = 1;

        function plusIndex(n){
            index = index + n;
            showImage(index);
        }


        showImage(index);

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

Answer 1

Here's solution -

You just need to change n < x.length condition

var index = 1;

function plusIndex(n) {
  index = index + n;
  showImage(index);
}


showImage(index);

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

<div class="marbletypeleft">




  <div class="slides">
    <img src="../page_images/1.jpeg" alt="1" width="100%" height="100%" />
  </div>
  <div class="slides">
    <img src="../page_images/2.jpeg" alt="2" width="100%" height="100%" />
  </div>
  <div class="slides">
    <img src="../page_images/3.jpeg" alt="3" width="100%" height="100%" />
  </div>
  <div class="slides">
    <img src="../page_images/4.jpeg" alt="4" width="100%" height="100%" />
  </div>

  <button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094</button>
  <button class="btn" onclick="plusIndex(1)" id="btn2">&#10095</button>
</div>