水平滚动容器？

Question

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

有什么想法吗？

    <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>

.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);
  }

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

Answer 1

您可以改用转盘，滑块，也可以停止自动滑动。

Answer 2

根据您的示例网站，我已经完成了设计。您可以水平滚动content-wrapper类。 （可选）我为图像添加了width:400px，以后您可以删除或更改该值。

* {
    box-sizing: border-box;
    position: relative;
}

.menu {
    display: flex;
    margin: 0 25px;
}

.menu ul {
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin: 0;
}

.m-auto {
    margin-left: auto;
}

.child {
    margin-right: 16px;
    padding: 15px 0;
}

.content-wrapper {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin: 30px 0;
    overflow-x: scroll;
}

img {
    height: 400px;
    object-fit: cover;
}

<div class="container">
    <div class="menu">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
        </ul>
        <div class="m-auto">
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
            </ul>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="child">
            <img src="https://via.placeholder.com/600x500">
        </div>
        <div class="child">
            <img src="https://via.placeholder.com/600x500">
        </div>
        <div class="child">
            <img src="https://via.placeholder.com/600x500">
        </div>
        <div class="child">
            <img src="https://via.placeholder.com/600x500">
        </div>
        <div class="child">
            <img src="https://via.placeholder.com/600x500">
        </div>
    </div>
    <div class="menu">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
        </ul>
        <div class="m-auto">
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
            </ul>
        </div>
    </div>
</div>