Nrthugu

I am trying to build a slideshow that pretty much works by changing the margins in my CSS.
So far it's working well but I want the next and previous button to disappear when the margins have a certain value and I couldn't find a solution.

Here is my js code:

const nextBtn = document.querySelector('#slideNext');

const prevBtn = document.querySelector('#slidePrev');

const slider = document.querySelector('.boxes-container');

const slideWidth = 250;



// Slider initial margin

slider.style.marginLeft = "0";



nextBtn.onclick = function() {

  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';

}



prevBtn.onclick = function() {

  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';

}



if (slider.style.marginLeft == "0") {

  prevBtn.style.display = "none";

} else if (slider.style.marginLeft == "-1000px") {

  nextBtn.style.display = "none";

} else {

  nextBtn.style.display = "inline-block";

  prevBtn.style.display = "inline-block";

}

My issue is on the last part: I don't know how to deal with an if/else statement that would modify the display of my buttons when the margin reach a certain value.

It would be awesome if anyone could point me in the right direction as I've spent some time trying to solve this on my own but couldn't find the right solution.

Thanks for your help!!

You created the logic correctly. The problem is that you don't check the margin every time the button is clicked (javascript is not reactive by default).

You have to wrap the margin's logic into a function and then check the margin values every time the button is clicked.

const nextBtn = document.querySelector('#slideNext');

const prevBtn = document.querySelector('#slidePrev');

const slider = document.querySelector('.boxes-container');

const slideWidth = 250;



// Slider initial margin

slider.style.marginLeft = "0";



nextBtn.onclick = function() {

  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';

  checkMargin();

}



prevBtn.onclick = function() {

  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';

  checkMargin();

}



function checkMargin() {

    if (slider.style.marginLeft == "0") {

      prevBtn.style.display = "none";

    } else if (slider.style.marginLeft == "-1000px") {

      nextBtn.style.display = "none";

    } else {

      nextBtn.style.display = "inline-block";

      prevBtn.style.display = "inline-block";

    }

}

There are other methods to make the DOM reactive, like MutationObserver. But it may be an overkill to this task.

The reason why it wasn't working was because I wasn't checking for the margins when the buttons were clicked.
I changed my code as follow:

const nextBtn = document.querySelector('#slideNext');

const prevBtn = document.querySelector('#slidePrev');

const slider = document.querySelector('.boxes-container');

const slideWidth = 250;



// Slider initial margin

slider.style.marginLeft = "0px";



function check() {

  if (slider.style.marginLeft == "0px") {

    prevBtn.style.display = "none";

  } else if (slider.style.marginLeft == "-1000px") {

    nextBtn.style.display = "none";

  } else {

    nextBtn.style.display = "inline-block";

    prevBtn.style.display = "inline-block";

  }

}



window.onload = check(); // Check the margins when the page is loaded



nextBtn.onclick = function() {

  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';

  check();

}



prevBtn.onclick = function() {

  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';

  check();

}

• Wrapped the margin logic inside of a check() function


• Check this function on page load and everytime the buttons are clicked

Thanks to Gustavo for his precious help!