html - 水平 slider CSS 的最佳方法

Question

我正在制作一个幻灯片滚动网站，该网站在单击按钮(或滚动)时转到特定部分。当你点击一个按钮时，这个想法就在主页上，它会根据部分向左或向右翻译X。

如何布置 CSS 以使每个部分都与 100vh 和 100vw 内联。现在似乎每个部分之间都有 100vw 的空白空间。最终目标是 .main 部分是您在加载时看到的第一个部分，它可以滚动，或者理想情况下，按钮(您可以看到我正在处理的 onclick 功能)可以让您遍历该站点。但要等到以后才会那样做。需要处理 css。

#all-sections{
    display:inline-flex;
}
.main, .about, .professional, .fun-stuff, .blog, .contact{
height:100vh;
position: relative;
display:block;
width:100vw;
}

.main{
    background-color:white;
    transform: translateX(0%);
}

.about{
    background-color:red;
    transform: translateX(-100%);
}

.professional{
    background-color:purple;
    transform: translateX(-200%);
}

.fun-stuff{
    background-color:black;
    transform: translateX(+100%);
}

.blog{
    background-color:blue;
    transform: translateX(+200%);
}

.contact{
    background-color:rgb(1, 235, 21);
    transform: translateX(+300%);
}

<section id="all-sections">
<section class="main">
<header>
<ul id="menu-list">
    <button onclick="toAbout()" id="about">About</button>
    <button onclick="toProf()" id="professional">Professional</button>
    <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>
    <button onclick="toBlog()" id="blog">Blog</button>
    <button onclick="toContact()" id="contact">Contact</button>
</ul>
</header>
</section>

<section class="about"></section>

<section class="professional"></section>

<section class="fun-stuff"></section>

<section class="blog"></section>

<section class="contact"></section>

Answer 1

由于每个部分的位置已经设​​置为relative，这意味着它们将相对于前一个部分定位，您可以将每个部分设置为 left: 0 所以他们会一个接一个地开始。

* {
    margin: 0;
}

#all-sections{
    display:inline-flex;
}
.main, .about, .professional, .fun-stuff, .blog, .contact{
    height:100vh;
    position: relative;
    left: 0
    display:block;
    width:100vw;
}

.main{
    background-color:white;
}

.about{
    background-color:red;
}

.professional{
    background-color:purple;
}

.fun-stuff{
    background-color:black;
}

.blog{
    background-color:blue;
}

.contact{
    background-color:rgb(1, 235, 21);
}

<section id="all-sections">
<section class="main">
<header>
<ul id="menu-list">
    <button onclick="toAbout()" id="about">About</button>
    <button onclick="toProf()" id="professional">Professional</button>
    <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>
    <button onclick="toBlog()" id="blog">Blog</button>
    <button onclick="toContact()" id="contact">Contact</button>
</ul>
</header>
</section>

<section class="about"></section>

<section class="professional"></section>

<section class="fun-stuff"></section>

<section class="blog"></section>

<section class="contact"></section>

如果您希望导航栏始终可见，您可以将该元素专门设置为 position: fixed 并且它在滚动时不会移动。

#menu-list {
    position: fixed;
    z-index: 9999;
}

* {
    margin: 0;
}

#all-sections{
    display:inline-flex;
}

.main, .about, .professional, .fun-stuff, .blog, .contact{
    height:100vh;
    position: relative;
    left: 0
    display:block;
    width:100vw;
}

.main{
    background-color:white;
}

.about{
    background-color:red;
}

.professional{
    background-color:purple;
}

.fun-stuff{
    background-color:black;
}

.blog{
    background-color:blue;
}

.contact{
    background-color:rgb(1, 235, 21);
}

<section id="all-sections">
<section class="main">
<header>
<ul id="menu-list">
    <button onclick="toAbout()" id="about">About</button>
    <button onclick="toProf()" id="professional">Professional</button>
    <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>
    <button onclick="toBlog()" id="blog">Blog</button>
    <button onclick="toContact()" id="contact">Contact</button>
</ul>
</header>
</section>

<section class="about"></section>

<section class="professional"></section>

<section class="fun-stuff"></section>

<section class="blog"></section>

<section class="contact"></section>