How can I adjust the slider correctly?

January 15, 2023

I want to create a basic slider with javascript. There are images and when I click left and right buttons the images must be changed.

My code doesn’t work. Where is my problem? No image changes even if we press the buttons. All my pictures are in jpg format.

(function() {
  const pictures = [
    "i1",
    "i2",
    "i3",
    "i4",
    "i5",
    "i6",
    "i7"
  ];

  let buttons = document.querySelectorAll(".btn");
  let imgDiv = document.querySelector(".img-container");
  let counter = 0;

  buttons.forEach(function(button) {
    button.addEventListener("click", function(e) {
      if (button.classList.contains('btn-left')) {
        counter--
        if (counter < 0) {
          counter = pictures.length - 1;
          console.log('nnhnhh')
        }
        imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
      }

      if (button.classList.contains('btn-right')) {
        counter++
        if (counter > pictures.length - 1) {
          counter = 0;
        }
        imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
      }
    })
  })
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #F3ff58;
}

.img-container {
  width: 60%;
  min-height: 60vh;
  background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
  border: 0.5rem solid #F3ff70;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  position: relative;
  margin: 4rem auto;
  box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}

.btn-right {
  position: absolute;
  top: 50%;
  right: 0;
  background-color: #3B117E;
  color: #fff;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  -o-transform: translate(50%, -50%);
  border: 0.2rem solid #3CBFF8;
  font-size: 1.5rem;
  padding: 15px;
  cursor: pointer;
}

.btn-left {
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #3B117E;
  color: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  border: 0.2rem solid #3CBFF8;
  font-size: 1.5rem;
  padding: 15px;
  cursor: pointer;
}

<div class="img-container">
  <a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
  <a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>

>Solution :

Your logic itself is working fine. The problem is because you wrapped the logic in an anonymous function which you never invoke. To fix the problem, unwrap your code.

In addition, the logic can be made more succinct. You can use a single event handler for all .btn elements by adding a data attribute to them which controls what value is added to the counter, along with Math.min() and Math.max() to ensure the counter never goes out of bounds.

const pictures = ["i1", "i2", "i3", "i4", "i5", "i6", "i7"];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;

buttons.forEach(button => {
  button.addEventListener("click", function(e) {
    counter += parseInt(e.currentTarget.dataset.dir, 10);
    counter = Math.max(Math.min(counter, pictures.length - 1), 0);
    imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`;
    
    console.log(counter); // just for debugging
  })
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #F3ff58;
}

.img-container {
  width: 60%;
  min-height: 60vh;
  background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
  border: 0.5rem solid #F3ff70;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  position: relative;
  margin: 4rem auto;
  box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}

.btn-right {
  position: absolute;
  top: 50%;
  right: 0;
  background-color: #3B117E;
  color: #fff;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  -o-transform: translate(50%, -50%);
  border: 0.2rem solid #3CBFF8;
  font-size: 1.5rem;
  padding: 15px;
  cursor: pointer;
}

.btn-left {
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #3B117E;
  color: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  border: 0.2rem solid #3CBFF8;
  font-size: 1.5rem;
  padding: 15px;
  cursor: pointer;
}

<div class="img-container">
  <a class="btn btn-left" data-dir="-1"><i class="fas fa-caret-left"></i></a>
  <a class="btn btn-right" data-dir="1"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>