Javascript 如何管理带有按钮的CSS旋转木马？

我正在尝试制作一个图像旋转木马，它可以自己滑动，但也可以由箭头按钮控制。我添加了关键帧来控制滑块的滑动动画，但是对于按钮，我不知道从哪里开始。有没有办法使用javascript将此函数添加到按钮中

.carousel{
溢出：隐藏；
}
.旋转木马图{
位置：相对位置；
宽度：600vw；
动画：35s滑块无限大；
显示：表格；
边距块开始：0；
边距块结束：0；
边距内联开始：0；
边距内联结束：0；
}
.旋转木马图{
宽度：100vw；
}
@关键帧滑块{
0% {
左：0vw；
}
14% {
左：0vw；
}
15% {
左：-100vw；
}
29% {
左：-100vw；
}
30% {
左：-200vw；
}
44% {
左：-200vw；
}
45% {
左：-300vw；
}
59% {
左：-300vw；
}
60% {
左：-400vw；
}
74% {
左：-400vw；
}
75% {
左：-500vw；
}
90% {
左：-500vw；
}
100% {
左：0vw；
}
}
.main_carousel_right_箭头{
字体大小：2vw；
填料：5vw 2vw；
背景色：rgb（255、255、255）；
最高：6%；
位置：绝对位置；
右：0px；
边框左上半径：5px；
边框左下半径：5px；
}
.主旋转木马左箭头{
字体大小：2vw；
填料：5vw 2vw；
背景色：rgb（255、255、255）；
最高：6%；
位置：绝对位置；
左：0px；
边框右上角半径：5px；
边框右下半径：5px；
}

---

滑块的问题是，整个动画周期=1次迭代，这意味着

后退

和

前进

按钮不能与此滑块一起使用，这是默认情况下的情况。我删除了您的

@keyframes

算法，并将其替换为

setInterval（）

滑块完全用javascript编写

同时将

过渡：1s

添加到

.carousel figure

，以实现平滑的幻灯片过渡

在中，我建议您使用选择器

.carousel figure

中的

display:table

。现在，您需要将其替换为

显示：flex

let anime=document.querySelector（'.carousel-figure'）；
let left=document.querySelector（'.main_carousel_left_arrow'）；
let right=document.querySelector（'.main_carousel_right_arrow'）；
var阶跃=0；
函数animate（）{
如果（步骤>-600）{
anime.style.transform='translateX（'+step+'vw'）；
}否则{
anime.style.transform='transformX（100vw）'；
步骤=100；
}
}
setInterval（函数（）{
步骤=步骤-100；
制作动画（）；
}, 7000);
right.onclick=function（）{
步骤=步骤-100；
制作动画（）；
}
left.onclick=函数（）{
步骤=步骤+100；
制作动画（）；
}

.carousel{
溢出：隐藏；
}
.旋转木马图{
位置：相对位置；
宽度：600vw；
过渡：1s；
显示器：flex；
保证金：0；
}
.旋转木马图{
宽度：100vw；
}
.main_carousel_right_箭头{
字体大小：2vw；
填料：5vw 2vw；
背景色：rgb（255、255、255）；
最高：6%；
位置：绝对位置；
右：0px；
边框左上半径：5px；
边框左下半径：5px；
}
.主旋转木马左箭头{
字体大小：2vw；
填料：5vw 2vw；
背景色：rgb（255、255、255）；
最高：6%；
位置：绝对位置；
左：0px；
边框右上角半径：5px；
边框右下半径：5px；
}

你好。这可以使用javascript来完成，即获取

left

规则的当前值，并根据按下的按钮添加或删除100vw。@sergeykuznetsov有没有办法回放或转发动画以获得平滑效果