how to full slide of slider pure javascript

Question

i try to run a full slide slider, i try to track the width's of container and then transform it. but as soon as i click the next button, i cant click the prev button. heres the code

(function(){

var listEl = document.querySelector('.home-grid.products-grid.products-grid--max-4'); 
var btnLeftEl = document.querySelector('#left-btn');  
var btnRightEl = document.querySelector('#right-btn');   
var count = 0;   
var full = listEl.offsetWidth;   
function slideImages(dir){
        var totalChildren = listEl.querySelectorAll(".item").length;
        dir === "left" ? ++count : --count;
// heres i translate the container to show another 4 
        listEl.style.transform = `translate(${'-'+full}px)`;
        btnLeftEl.style.display = count < 0 ? "block" : "none";
        btnRightEl.style.display = count > 4-totalChildren ? "block" : "none";   }

  btnLeftEl.addEventListener("click", function(e) {
      slideImages("left");   });   
btnRightEl.addEventListener("click", function(e) {
          slideImages("right");
          console.log(full);   
         });

})();

you can check the full example here heres the example im stuck to make the prev button work.

Paul · Accepted Answer

The problem is, that you apply the wrong translation when you click on the left button.

Try that (and check the changes in slideImages(dir)):

(function() {

  var listEl = document.querySelector('.home-grid.products-grid.products-grid--max-4');
  var btnLeftEl = document.querySelector('#left-btn');
  var btnRightEl = document.querySelector('#right-btn');
  var count = 0;
  var full = listEl.offsetWidth;
  var currTranslation = 0;

  function slideImages(dir) {
    var totalChildren = listEl.querySelectorAll(".item").length;
    dir === "left" ? ++count : --count;

    // Case left: Move images to the right by adding full
    // Case right: Move images to the left by substracting full
    if (dir === "left") currTranslation += full;
    else currTranslation -= full;

    listEl.style.transform = `translate(${currTranslation}px)`;
    // listEl.style.left = count * 286 + 'px';
    btnLeftEl.style.display = count < 0 ? "block" : "none";
    // Here, 4 is the number displayed at any given time
    btnRightEl.style.display = count > 4 - totalChildren ? "block" : "none";
  }

  btnLeftEl.addEventListener("click", function(e) {
    slideImages("left");
  });
  btnRightEl.addEventListener("click", function(e) {
    slideImages("right");
    console.log(full);
  });


})();

#body {
  margin: 10px 40px;
}

.home-product-new-hldr {
  position: relative;
  width: 1140px;
}

.home-product-new {
  width: 1140px;
  overflow: hidden;
}

.home-grid.products-grid.products-grid--max-4 {
  transition: -ms-transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s, transform 0.5s ease 0s;
  position: relative;
  white-space: nowrap;
}

.item-container {
  display: inline-block;
  margin: 4px;
  vertical-align: top;
  width: 274px;
}

.slider-btn-hldr-left {
  left: -32px;
}

.slider-btn-hldr-right {
  right: -32px;
}

.slider-btn-hldr {
  bottom: 0;
  display: block;
  padding: 0;
  width: 24px;
  position: absolute;
  top: 40%;
  z-index: 1;
}

.slider-btn {
  background-color: transparent;
  border: 0 none;
  color: buttontext;
  cursor: pointer;
  display: block;
}

#left-btn {
  display: none;
}

.slider-btn svg {
  width: 24px;
  height: 24px;
}

.products-grid .item {
  margin-left: 0;
  background: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  float: left;
}

how to full slide of slider pure javascript

Answers (1)

Related Questions