如何修复无法正常运行的Javaous Carousel左控件？

如何解决如何修复无法正常运行的Javaous Carousel左控件？

我正在独自努力为最近购买的blogspot.com模板创建post css stype。在这么多的教程中，我确实做了我想要的东西，但是轮播的问题是左控件无法正常使用。你能帮我吗？

我正在YouTube上搜索。大部分代码是对其他人的修改（我是图形设计师，几乎不了解HTML基础知识）。

非常感谢！

  const carousel2 = document.querySelector('.carousel2');
  const slider2 = document.querySelector('.slider2');

  const next = document.querySelector('.next');
  const prev = document.querySelector('.prev');
  let direction;

  next.addEventListener('click',function() {
    direction = -1;
    carousel2.style.justifyContent = 'flex-start';
    slider2.style.transform = 'translate(-20%)';  
  });

  prev.addEventListener('click',function() {
    if (direction === -1) {
      direction = 1;
      slider2.appendChild(slider2.firstElementChild);
    }
    carousel2.style.justifyContent = 'flex-end';    
    slider2.style.transform = 'translate(20%)';  
    
  });

  slider2.addEventListener('transitionend',function() {
    // get the last element and append it to the front
    
    if (direction === 1) {
      slider2.prepend(slider2.lastElementChild);
    } else {
      slider2.appendChild(slider2.firstElementChild);
    }
    
    slider2.style.transition = 'none';
    slider2.style.transform = 'translate(0)';
    setTimeout(() => {
      slider2.style.transition = 'all 0.5s';
    })
  },false);

/*----------POST CAROUSEL SLIDER------------
---------------------------------------------------*/

.carousel-general-container {
  max-width: 780px;
  height: auto;
  width: 100%;
  margin: 0px auto;
  padding-bottom: 20px;
}

/*--POST CAROUSEL 2--*/

.slider-container2 {
  max-width: 100%;
  height: auto;
  width: 100%;
  margin: 10px auto;
}
.carousel2 {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 6px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}
.slider2 {
  display: flex;
  height: 100%;
  width: 500%;
  flex-shrink: 0;
  transition: all 0.5s;

}
.slider2 div {
  flex-basis: 20%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.slider2 div img {
  height: auto;
  width: 100%;
}
.controls2 button.next {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  color: white;
}
.controls2 button.prev {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  color: white;
}
.controls2 button i {
  font-size: 40px;
}

     
/*---------------------------------------------END--*/

<!--POST CAROUSEL CONTAINER-->
<div class="carousel-general-container">
  <!--POST CAROUSEL SLIDER 2-->
  <div class="slider-container2">
    <div class="carousel2">
      <div class="slider2">
        <div>
            <img src="https://1.bp.blogspot.com/-u0J4VE6mIeA/XyOZayGTTAI/AAAAAAAAHjc/UWqc7cn13CU4lsoQ6YXtJTu0FCmbGxuKACPcBGAYYCw/s1024/Templates-para-LIbroS.jpg">
        </div>

        <div>
            <img src="https://1.bp.blogspot.com/-ujmxeoNvpA0/XyXhGwza0YI/AAAAAAAAHkM/NGONl1zblm0ufze1a0DLoCdKSCY_dbgxgCPcBGAYYCw/s1000/graffiti2.jpeg">
        </div>

      </div>

      <div class="controls2">
        <button class="next"><i class="material-icons">keyboard_arrow_right</i></button>
        <button class="prev"><i class="material-icons">keyboard_arrow_left</i></button>
      </div>

    </div>
  </div>
</div>

This is the codepen.

非常感谢！

解决方法

为什么不使用现有的轮播预制件？
自己做轮播可能会教给您很多东西，但这会花费很多时间！

我个人推荐您Slick.js！
它是完全可个性化的，并且与台式机和手机兼容。
这是quick tutorial的设置方法；）