Javascript 不会导致粗略垂直滚动的水平滑块/carosel

我正在尝试重新创建一个类似于Spotify或Netflix上的水平滑块，当点击按钮时该滑块会移动。它们在许多不同的网站上很流行，比如亚马逊和其他网站。但即便如此，我还是很难找到类似的东西。我在Youtube（）上看到了一段视频，但在这段视频中，箭头在滑动动画中保留。我发现的另一个解决方案是使用CSS中的

overflow-x

属性制作一个水平滚动条，该属性生成一个滑块，但没有按钮。这将是故事的结尾，但由于某种原因，当我向下滚动我的网站时，它会导致一个粗糙的垂直滚动

这是我的网站代码

*{
保证金：0；
填充：0；
字体大小：粗体；
}
.第1节{
高度：92vh；
}
navbar先生{
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
字体系列：“Roboto”，无衬线；
}
导航{
弹性：1；
右边距：40px；
}
李国荣{
显示：内联块；
列表样式：无；
利润率：30px 30px；
}
海军ulli a{
文字装饰：无；
颜色：#555555；
字号：200；
字号：19px；
}
NavButton先生{
背景色：#555555；
}
.导航按钮{
背景色：#8b008b；
}
.navButtonL，
.导航按钮{
填充：7.5px14px；
边界半径：40px；
}
.NavButtonla，
.纳瓦{
颜色：#F5；
}
.展柜名称{
字体大小：50px；
文本对齐：居中；
字体系列：“Roboto”，无衬线；
颜色：#555555；
}
.展示标题h1{
字体大小：300；
}
.展示摘要{
字体大小：20px；
文本对齐：居中；
字体系列：“Roboto”，无衬线；
颜色：#000000；
边缘顶部：20px；
}
.展示摘要p{
字体大小：300；
}
.第2节{
颜色：#F5；
}
/*
.滑块：悬停{
-webkit过滤器：亮度（70%）；
滤光片：亮度（90%）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}*/
.滑块{
显示器：flex；
溢出-x：滚动；
}
.滑块：：-webkit滚动条{
显示：无；
}
.幻灯片{
边缘顶部：30px；
左边距：25px；
颜色：#8b008b；
字体系列：“Roboto”，无衬线；
字体大小：37px；
}
.滑块h4{
字号：200；
}
.滑块{
弹性：1；
利润率：25像素30像素；
背景色：#ffffff；
/*盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）*/
填充：10px；
边界半径：15px；
边缘顶部：20px；
}
.幻灯片图像{
宽度：150px；
显示：块；
左边距：自动；
右边距：自动；
边界半径：15px；
}
幻灯片名称{
字体系列：“Roboto”，无衬线；
字体大小：300；
颜色：#555555；
文本对齐：居中；
字体大小：22px；
}
.sliderQuote{
文本对齐：居中；
字体系列：“Roboto”，无衬线；
字号：100；
颜色：#555555；
字体大小：13px；
}

ShowGauge-主页









玻璃陈列柜
“Lorem ipsum dolor sit，amet Concertetur Adipising Elite。”


滑块1
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
幻灯片2
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑块3
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片说明。”
滑动
“幻灯片D