Javascript CSS幻灯片转换

我已经用动态导入的图像制作了一个CSS幻灯片，但是现在添加转换时遇到了问题。我希望单击“下一步”或“上一步”按钮时图像可以滑动，但找不到解决此问题的方法。以下是我当前代码的一个片段：

$（“#下一步”）。单击（函数（）{
$（“#滑块”）.append（$（“#滑块img:类型的第一个”）；
});
$（“#Prev”）。单击（函数（）{
$（“#滑块”）.prepend（$（“#滑块img:类型的最后一个”）；
});
html{
对齐项目：居中；
背景色：#31353D；
显示器：flex；
证明内容：中心；
}
#包装纸{
边缘顶部：20px；
}
#幻灯片放映{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
溢出：隐藏；
位置：相对位置；
}
#滑块{
边框：5px实心#1C1D21；
高度：568px；
溢出：隐藏；
宽度：1024px；
}
#滑块式img{
高度：568px；
宽度：1024px；
过渡：所有1；
}
#箭{
显示器：flex；
证明内容：之间的空间；
高度：30px；
位置：绝对位置；
宽度：1024px；
}
#箭头一{
背景色：rgba（255、255、255、25）；
颜色：#1C1D21；
光标：指针；
高度：30px；
填充：15px；
过渡：背景色.5s，颜色.5s；
}
#箭头i：第一种类型{
右边填充：20px；
}
#箭头i：最后一种类型{
左侧填充：20px；
}
#箭头一：悬停{
背景色：rgba（28,29,33,75）；
颜色：#EEEFF7；
}
仅仅使用CSS来实现您想要的是不够的。我看到你也在使用JS来实现滑动动画，所以我给自己一个选择，也可以使用JS来解决这个问题。其思想是使用
transform:translate（…）
结合
transition
来执行平移，以执行滑动动画。我们将对幻灯片中的图像进行翻译

下面是一个例子，展示了如何做到这一点。我选择使用vanilla JS而不是jQuery，因为您似乎不需要jQuery

虽然不相关，但我已经修复了HTML，使其嵌套更少，并且我还将您的arrows div移动，以便更容易使用CSS进行调整


const next=document.querySelector（“#next”）
const prev=document.querySelector（“#prev”）
常量滑块=document.querySelector（“#滑块”）
让images=slider.querySelectorAll（'img'））
设currentImageIndex=0
设maxImageIndex=images.length-1
next.addEventListener（'click'，e=>{
updateCurrentImageIndex（1）
slidemage（）
})
上一个addEventListener（'click'，e=>{
updateCurrentImageIndex（-1）
slidemage（）
})
函数updateCurrentImageIndex（值）{
currentImageIndex+=值
如果（currentImageIndex<0）currentImageIndex=maxImageIndex
如果（currentImageIndex>maxImageIndex）currentImageIndex=0，则为else
}
函数slideImage（）{
images.forEach（image=>{
image.style.transform=`translateX（${-100*currentImageIndex}%）`
})
}
*{
框大小：边框框；
}
html{
对齐项目：居中；
背景色：#31353D；
显示器：flex；
证明内容：中心；
}
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
}
#滑块{
位置：相对位置；
显示器：flex；
宽度：100%；
身高：100%；
边框：5px实心#1C1D21；
溢出：隐藏；
}
#滑块式img{
最大高度：100%；
最大宽度：100%；
弹性：0.100%；
过渡：所有1；
}
#箭{
显示器：flex；
证明内容：之间的空间；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
}
#箭头一{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
背景色：rgba（255、255、255、25）；
颜色：#1C1D21；
光标：指针；
高度：60px；
填充：15px；
过渡：背景色.5s，颜色.5s；
}
#箭头i：最后一种类型{
左：100%；
转换：翻译（-100%，-50%）；
}
#箭头一：悬停{
背景色：rgba（28,29,33,75）；
颜色：#EEEFF7；
}
这对您有帮助吗？不是真的，我只是想要一个普通的幻灯片，根据您单击“下一步”还是“上一步”来左右滑动图像。