javascript - 如何让 slider 完全滑动纯javascript

Question

我尝试运行完整的幻灯片 slider ，我尝试跟踪容器的宽度，然后对其进行转换。但是一旦我单击下一个按钮，我就无法单击上一个按钮。代码如下

(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);   
         });

})();

您可以在此处查看完整示例 heres the example我一直在努力让上一个按钮正常工作。

Answer 1

问题是，当您单击左侧按钮时，您应用了错误的翻译。

尝试一下(并检查 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;
}

<div id="body">
  <div class="home-product-new-hldr">
    <div class="slider-btn-hldr slider-btn-hldr-left">
      <button id="left-btn" class="slider-btn" style="display: none;">
        <svg viewBox="0 0 256 256">
            <polyline fill="none" stroke="black" stroke-width="16" points="184,16 72,128 184,240"></polyline>
        </svg>
    </button>
    </div>
    <div class="home-product-new">
      <div class="home-grid products-grid products-grid--max-4" style="left: 0px;">
        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=7" />
          </div>
        </div>
        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=21" />
          </div>
        </div>
        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=14" />
          </div>
        </div>
        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=19" />
          </div>
        </div>
        <div class="item-container">
          <div class="item first">
            <img src="https://unsplash.it/274/400?image=22" />
          </div>
        </div>
        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=23" />
          </div>
        </div>
        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=23" />
          </div>
        </div>

        <div class="item-container">
          <div class="item">
            <img src="https://unsplash.it/274/400?image=23" />
          </div>
        </div>

      </div>
    </div>
    <div class="slider-btn-hldr slider-btn-hldr-right">
      <button id="right-btn" class="slider-btn" style="display: block;">
        <svg viewBox="0 0 256 256">
            <polyline fill="none" stroke="black" stroke-width="16" points="72,16 184,128 72,240"></polyline>
        </svg>
    </button>
    </div>
  </div>
  <div>