如何从我的图片库中制作 slider

Question

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

每当我添加一张照片时，这些卡片就会越来越小，但我想一次只显示 4 张照片并隐藏其他照片，并制作某种 slider。 我尝试更改容器宽度并制作溢出-x：滚动，但它似乎不起作用。 我可以用这种画廊风格实现 slider 效果吗？ 如何？ 我是 js 新手，所以我尝试在其他网站上寻找解决方案，但它们仅使用 static 卡，我不知道如何在我的画廊中实现它。

 .containerss { display: flex; width: 100%; padding: 4% 2%; box-sizing: border-box; height: 86vh; }.box { flex: 1; overflow: hidden; transition: .5s; margin: 0 2%; box-shadow: 0 20px 30px rgba(0, 0, 0, .1); line-height: 0; background-color: black; }.box>img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }.box:hover { flex: 1 1 40%; }.box:hover>img { width: 100%; height: 100%; }

 <div class="containerss"> <div class="box"> <img src="https://source.unsplash.com/1000x807" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x808" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x810" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x802" loading=lazy> </div> </div>

Answer 1

您可以使用100%宽度的带有水平滚动的包装器来包装您的画廊，然后根据需要加宽您的画廊容器。

 .wrapper{ width:100%; overflow: scroll-x; }.containerss { display: flex; width: 130%; padding: 4% 2%; box-sizing: border-box; height: 86vh; }.box { flex: 1; overflow: hidden; transition: .5s; margin: 0 2%; box-shadow: 0 20px 30px rgba(0, 0, 0, .1); line-height: 0; background-color: black; }.box>img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }.box:hover { flex: 1 1 40%; }.box:hover>img { width: 100%; height: 100%; }

 <div class="wrapper"> <div class="containerss"> <div class="box"> <img src="https://source.unsplash.com/1000x807" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x808" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x810" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x802" loading=lazy> </div> <div class="box"> <img src="https://source.unsplash.com/1000x802" loading=lazy> </div> </div> </div>