Html 水平滚动容器？

我试图在顶部和底部的固定导航链接之间实现一个水平滚动容器。图像之间的填充量和第一张和最后一张图像外部的填充量与导航链接上的填充量相同

有什么想法吗

    <div class="container">

            <div class="content-wrapper">

              <div class="child">
                <img src="img/26Kibera5-superJumbo.jpg">
              </div>

              <div class="child">
                <img src="img/26Kibera5-superJumbo.jpg">
              </div>

              <div class="child">
                <img src="img/26Kibera5-superJumbo.jpg">
              </div>

              <div class="child">
                <img src="img/26Kibera5-superJumbo.jpg">
              </div>

              <div class="child">
                <img src="img/26Kibera5-superJumbo.jpg">
              </div>

            </div>

          </div>

</body>

</html>

---

我希望图像水平滚动，在导航链接之间居中。

您可以使用旋转木马、滑块，也可以停止自动滑动。

根据您的示例网站，我已经完成了设计。您可以水平滚动

内容包装器

类。（可选）我为图像添加了

宽度：400px

，以后您可以删除或更改该值

*{
框大小：边框框；
位置：相对位置；
}
.菜单{
显示器：flex；
边际：0.25px；
}
.菜单ul{
保证金：0；
填充：0；
}
李先生{
显示：内联块；
填充：0 15px 0 15px；
保证金：0；
}
m-auto{
左边距：自动；
}
.孩子{
右边距：16px；
填充：15px0；
}
.内容包装器{
身高：100%；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
利润率：30px0；
溢出-x：滚动；
}
img{
高度：400px；
对象匹配：覆盖；
}

@Saravana我不确定我是否理解？你想完全按照你的参考网站？是的。我在一个名为xhbtr的公文包主机上创建了这个网站，我正试图自己编写好它。我会尽量完全按照你的样本网站谢谢！有没有一种方法可以让导航链接保持在页面的各个角落，每边填充25px，然后让它们之间的图像容器更大？

.container {
    position: fixed;
    left: 0;
    width: 75vh;
    height: 75vw;

    overflow: scroll;
    transform: rotate(-90deg);
    transform-origin: center calc(50vh);
  }

.child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 10em auto;
    padding: 10em;
    width: 500px;
    height: 500px;

    transform: rotate(90deg);
  }