<div style="text-align: center;display: flex; align-items: center; justify-content:center;">
  <div class="slider" style="margin-top: 20px">
    <!-- this the parent element of Images -->
    <div class="slidercontainer"></div> 
    
    <div class="buttonsSlider">
      <button id="pre"> < Previous</button>
      <!-- put in the numslide buttons as your images count and give them 
          class="countslide" 
          except first one give it class="countslide activeSlide"-->
          <div class="numslide"> 
            <button class="countslide activeSlide">1</button>
            <button class="countslide">2</button>
            <button class="countslide">3</button>
            <button class="countslide">4</button>
            <button class="countslide">5</button>
          </div>
      <button id="next">Next ></button>
    </div>
  </div>
</div>                

div(style="text-align: center;display: flex; align-items: center; justify-content:center;")
  .slider(style="margin-top: 20px")
    .slidercontainer
    .buttonsSlider
      button#pre < Previous
      .numslide
        button.countslide.activeSlide 1
        button.countslide 2
        button.countslide 3
        button.countslide 4
        button.countslide 5
      button#next Next >

.slider{
  display: flex;
  align-items: center;
  justify-content:space-around;
  flex-direction: column;
  width: 50vw;
  height: auto;
  max-height: 70vh;
  margin-bottom: 100px;
}
.slidercontainer{
  width: 60vw;
  height: auto;
  max-height: 70vh;
  position: relative;

}
@media (max-width:737px) {
  .slidercontainer{
    width: 90vw;
  }
}
.sliderimg{
  margin: 15px auto;
  display: block;
  width: inherit;
  height: inherit;
  max-height: inherit;
}
.pslide{
  position: absolute;
  top: 0;
  font-size: 1rem;
  background-color: #039ae5c5;
  color: white;
  padding: 15px;
  border-radius: 16px;
  opacity: 0.9;
  margin-top: 30px;
  margin-left: 20px;
  z-index: 100;
  user-select: none;
}
.buttonsSlider{
  display: flex;
  justify-content: space-between !important;
  margin-top: 1rem;
  align-items: center;
}
.numslide{
margin: 15px;
display: flex;

}
.buttonsSlider button {
  all: unset;
  color: white;
  background-color: #039be5;
  padding: 10px;
  border-radius: 5px;
  font-weight: 500;
  transition: 0.2s all;
}
.numslide button{
  padding: 7px 10px;
  background-color: #e6ecec;
  color: #000;
  font-weight: 400;

}
.numslide button:hover{
  background-color: #57b5e4;
}
.numslide button:focus{
  background-color: #039be5 !important;
}
.activeSlide{
  background-color: #039be5 !important;
}
#next:active{
  transform: translateX(4px);
}
#pre:active{
  transform: translateX(-4px);
}
#next:hover,#pre:hover{
  background-color: #57b5e4;
}
#next:disabled,#pre:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
button.countslide {
  margin: 4.52px;
}

const arrimg = [ //here put your img elements And 
    //Make sure they are between backticks ``
    `<img class="sliderimg" src="https://1.bp.blogspot.com/-YugD5EEDpos/WNgBnFz2gEI/AAAAAAAAs_M/0qTkAE2xUuUKvlBvqXFdljeDv_VNR94pwCLcB/s640/1422-9.jpg" alt="">`,
    `<img class="sliderimg" src="https://1.bp.blogspot.com/-YugD5EEDpos/WNgBnFz2gEI/AAAAAAAAs_M/0qTkAE2xUuUKvlBvqXFdljeDv_VNR94pwCLcB/s640/1422-9.jpg" alt="">`,
    `<img class="sliderimg" src="https://1.bp.blogspot.com/-YugD5EEDpos/WNgBnFz2gEI/AAAAAAAAs_M/0qTkAE2xUuUKvlBvqXFdljeDv_VNR94pwCLcB/s640/1422-9.jpg" alt="">`,
    `<img class="sliderimg" src="https://1.bp.blogspot.com/-YugD5EEDpos/WNgBnFz2gEI/AAAAAAAAs_M/0qTkAE2xUuUKvlBvqXFdljeDv_VNR94pwCLcB/s640/1422-9.jpg" alt="">`,
    `<img class="sliderimg" src="https://1.bp.blogspot.com/-YugD5EEDpos/WNgBnFz2gEI/AAAAAAAAs_M/0qTkAE2xUuUKvlBvqXFdljeDv_VNR94pwCLcB/s640/1422-9.jpg" alt="">`,
  ];
  const slidercontainer = document.querySelector(".slidercontainer");
  let numslide = document.querySelector(".numslide");
  const countbutton = document.querySelectorAll(".countslide");
  let i = 0;

  slidercontainer.innerHTML += `<p class="pslide">#${i + 1} OF #${
    arrimg.length
  }</p>`;
  slidercontainer.innerHTML += arrimg[i];
  pre.setAttribute("disabled", "");

  const nextdisabled = (x) => {
    if (x == arrimg.length - 1) {
      next.setAttribute("disabled", "");
    } else {
      pre.removeAttribute("disabled");
    }
  };

  const slideimgadd = (i) => {
    slidercontainer.innerHTML = "";
    slidercontainer.innerHTML += arrimg[i];
    slidercontainer.innerHTML += `<p class="pslide">#${i + 1} OF #${
      arrimg.length
    }</p>`;
  };

  const predisabled = (x) => {
    if (x == arrimg.length) {
      pre.removeAttribute("disabled");
    } else {
      next.removeAttribute("disabled");
    }
    if (x == 0) {
      pre.setAttribute("disabled", "");
    }
  };

  const active = () => {
    numslide
      .getElementsByClassName("activeSlide")[0]
      .classList.remove("activeSlide");
    countbutton[i].classList.add("activeSlide");
  };

  next.addEventListener("click", () => {
    i++;
    slideimgadd(i);
    nextdisabled(i);
    active();
  });
  pre.addEventListener("click", () => {
    i--;
    slideimgadd(i);
    predisabled(i);
    active();
  });

  countbutton.forEach((item, index) => {
    item.addEventListener("click", () => {
      numslide
        .getElementsByClassName("activeSlide")[0]
        .classList.remove("activeSlide");
      item.classList.add("activeSlide");
      i = index;
      slideimgadd(index);
      if (index == 0) {
        predisabled(index);
      } else {
        pre.removeAttribute("disabled");
        next.removeAttribute("disabled");
      }
      if (index + 1 == arrimg.length) {
        nextdisabled(index);
      }
    });
  });