如何修复Javascript旋转木马左控件不起作用

Question

我正在为最近购买的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>

这是代码笔。

非常感谢！

Answer 1

为什么不使用已经存在的转盘预制件
自己做旋转木马可能会教会你很多东西，但这会花费你很多时间

我个人推荐您Slick.js！
它是完全个性化的，兼容台式机和手机
这里有一个关于如何设置它的快速教程；(