Javascript 如何从图像库中制作滑块

我有一个像这样的照片库：

每当我添加一张照片时，这些卡片都会越来越小，但我只想一次显示4张照片，隐藏其他照片，并制作某种滑块。我试着改变容器宽度并制作overflow-x:scroll，但似乎不起作用。我可以用这个图库样式实现滑块效果吗？怎么做？我是js新手，所以我尝试在其他网站上寻找解决方案，但它们只使用静态卡，我不知道如何在我的图库中实现这一点

.containers{
显示器：flex；
宽度：100%；
填充：4%2%；
框大小：边框框；
高度：86vh；
}
.盒子{
弹性：1；
溢出：隐藏；
过渡：.5s；
利润率：0.2%；
盒影：20px30pxRGBA（0,0,0,1）；
线高：0；
背景色：黑色；
}
.box>img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
过渡：.5s；
}
.box:悬停{
弹性：140%；
}
.box：悬停>img{
宽度：100%；
身高：100%；
}

---

您可以使用带水平滚动的

100%

宽度包装纸包装您的多媒体资料，然后根据需要将多媒体资料容器加宽

.wrapper{
宽度：100%；
溢出：scroll-x；
}
.集装箱{
显示器：flex；
宽度：130%；
填充：4%2%；
框大小：边框框；
高度：86vh；
}
.盒子{
弹性：1；
溢出：隐藏；
过渡：.5s；
利润率：0.2%；
盒影：20px30pxRGBA（0,0,0,1）；
线高：0；
背景色：黑色；
}
.box>img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
过渡：.5s；
}
.box:悬停{
弹性：140%；
}
.box：悬停>img{
宽度：100%；
身高：100%；
}

它可以工作，但我想在右边留一个边距。有可能吗？也许收缩

包装器就可以了？这不完全是我想要的。