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 >
  <a ><i ></i></a>
  <a ><i ></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>

CodePudding user response：

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 >
  <a  data-dir="-1"><i ></i></a>
  <a  data-dir="1"><i ></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>