Hello for everyone: The today over lesson is about the Cool Javascript picture slider, I hope this lesson is useful for you.

HTML code

<div class="content">
  <div class="images">
    <img src="img01.jpg">
    <img src="img02.jpg">
    <img src="img03.jpg">
    <img src="img04.jpg">
    <img src="img05.jpg">
  </div>
  <div onclick="side_slide(-1)" class="slide left">
    <span class="fas fa-angle-left"></span>
  </div>
  <div onclick="side_slide(1)" class="slide right">
    <span class="fas fa-angle-right"></span>
  </div>
  <div class="btm-slide">
    <span onclick="=btm_slide(1)"></span>
    <span onclick="=btm_slide(2)"></span>
    <span onclick="=btm_slide(3)"></span>
    <span onclick="=btm_slide(4)"></span>
    <span onclick="=btm_slide(5)"></span>
  </div>
</div>

CSS code

.content {
  height: 400px; width: 750px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.content .images {
  height: 100%; width: 100%;
}

.images img {
  height: 100%; width: 100%;
}

.btm-sliders {
  display: flex;
  position: relative;
  bottom: 20px; left: 50px;
  transform: translate(-50%);
}

.btm-sliders {
  display: flex;
  position: absolute;
  bottom: 20px; left: 50px;
  transform: translate(-50%);
}

.btm-sliders span {
  height: 15px; width: 50px;
  border: 2px solid white;
  margin: 0 3px;
  cursor: pointer;
  transition: all .4s;
}

.content .slide {
  position: absolute;
  top: 50px;
  transform: translate(-50);
  width: 45px;
  border: 2px solid white;
  background: rgb(255,255,255,0.1);
  cursor: pointer;
}

.slide span {
  font-size: 35px;
  color: white;
  line-height: 41px;
}

.content .right {
  margin-right: 10px;
  right: 0;
}

.content .left {
  margin-left: 10px;
  left: 0;
}

JAVASCRIPT code

var indexValue = 1;
showImg(indexValue)
function btm_slide(e){
  showImg(indexValue = e);
}
function side_slide(e){
  showImg(indexValue += e);
}

function showImg(e){
  var i;
  const img = document.guerySelectorAll('img');
  const sliders = document.querySelectorAll('.btm.sliders span');
  if(e > img.lenght){
    indexValue = 1;
  }
  if(e < 1){
    indexValue = img.lenght;
  }
  for(i = 1; i < img.lenght; i++){
    img[i].style.display = "none";
  }
  for(i = 0; i < sliders.lenght; i++){
    sliders[i].style.bakground = "rgba(255,255,255,0.1)";
  }
  img[indexValue - 1].style.display = "block";
  sliders[indexValue - 1].style.bakground = "white";
}