如何使用纯javascript制作完整的幻灯片

我尝试运行一个完整的滑动滑块，我尝试跟踪容器的宽度，然后对其进行变换。但是，只要我单击“下一步”按钮，我就无法单击“上一步”按钮。 这是密码

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

})();

您可以在这里查看完整的示例

---

我一直想让prev按钮正常工作。

问题是，当你点击左按钮时，你应用了错误的翻译

尝试并检查slideImagesdir中的更改：

作用{ 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计数=0； var full=listEl.offsetWidth； var=0； 函数slidemagesdir{ var totalChildren=listEl.queryselectoral.item.length； dir===左？++计数：-计数； //案例左侧：通过添加“完整”将图像向右移动 //案例右侧：通过减去“完全”将图像向左移动 如果dir===左currTranslation+=满； 翻译-=完整； listEl.style.transform=`translate${currtransation}px`； //listEl.style.left=count*286+'px'； btnLeftEl.style.display=计数<0？块：无； //这里，4是在任何给定时间显示的数字 btnRightEl.style.display=计数>4-totalChildren？块：无； } btnLeftEl.addEventListenerclick，函数E{ slidemagesleft； }; btnRightEl.addEventListenerclick，函数E{ 幻灯片右侧； 控制台。logfull； }; }; 身体{ 利润率：10px 40px； } .家用产品新hldr{ 位置：相对位置； 宽度：1140px； } .家居用品新{ 宽度：1140px； 溢出：隐藏； } .home-grid.products-grid.products-grid-max-4{ 转换：-ms转换0.5s易用0s，-webkit转换0.5s易用0s，转换0.5s易用0s； 位置：相对位置； 空白：nowrap； } .物品容器{ 显示：内联块； 保证金：4倍； 垂直对齐：顶部； 宽度：274px； } .滑块btn hldr左{ 左：-32px； } .滑块btn hldr右侧{ 右：-32px； } .滑块btn hldr{ 底部：0； 显示：块； 填充：0； 宽度：24px； 位置：绝对位置； 最高：40%； z指数：1； } .滑块btn{ 背景色：透明； 边界：0无； 颜色：buttontext； 光标：指针； 显示：块； } 左btn{ 显示：无； } .滑块btn svg{ 宽度：24px； 高度：24px； } .产品网格.项目{ 左边距：0； 背景：白色； 盒影：0 3px 6px rgba0,0,0,0.16,0 3px 6px rgba0,0,0,0.23； 浮动：左； }

---

不客气。还有另一个bug，你需要研究一下：右键没有正确消失。只能将计数增加/减少1，不能增加/减少4。因此，您需要使用count*4>4-totalChildren。但肯定有更好的解决办法