通常我知道如何开始，有一些教程甚至经验，但在这一点上我什至不知道如何调用它。也许只要告诉我如何正确定义它就可以解决我的问题(-> 根据名称，我可以正确搜索)。
让我们为您提供我刚刚制作的这个快速模型。
我正在寻找 1:您如何调用它，尤其是 2:我将如何创建这样的东西？
我想创建面板，其中一些面板堆叠在一起，单击每个面板上的“下一步”按钮，您可以将该面板向左(或向右(向后))移动以转到下一个图 block 。假设每个面板都是一个投资组合元素(垂直堆叠)，在每个面板(投资组合元素)中，您可以水平滑动来回滑动以在每个图 block 上解释元素的一部分。
每个图 block 的布局由一个带有完整背景图像的图 block (background-size:cover) 和半宽图 block 文本框组成。当然，出于响应原因，框的文本应该使用 HTML 编写，而不是使用 Photoshop“嵌入”到图像中。
我假设这可以用 CSS3 和 jQuery 创建。唯一的问题是:我所有的 Google 搜索都一无所获，或者导致出现我不想要的非 Canvas 导航菜单。
要回答这个问题，要么:
1.定义这个叫法/我可以在谷歌搜索这个
2. 将我链接到一个好的教程/插件
3. 代码这么简单就写出来。
非常感谢大家!
使用所谓的radio hack，这实际上非常简单。您可以使用 仅 html 和 CSS(CSS3 实现平滑过渡)，这是非常可取的，因为 jquery 代表了一个很大的 block 供您的客户下载。
基本上是这样的(工作演示在这里:http://codepen.io/anon/pen/jcgxI):
HTML
我们使用单选输入集来确定应显示哪个“选项卡”。 radio 在这里是完美的，因为当一个被选中时，所有其他的都必须被取消选中。因此，请确保整个集合的属性名称相同。
<input type="radio" name="radio-set" id="radio-1" checked="checked"/>
<input type="radio" name="radio-set" id="radio-2"/>
<input type="radio" name="radio-set" id="radio-3"/>
<input type="radio" name="radio-set" id="radio-4"/>
然后我们将我们的内容真正包裹在任何标签中(结构部分 > 文章似乎很合适)。导航，即使它可以通过单击单选按钮本身来完成，也可以通过单击引用任何输入的标签来完成，通过它们的属性 FOR 设置为它们所引用的 ID。
<section>
<article id="article-1">
<h2>article 1</h2>
<label for="radio-4"></label>
<label for="radio-2"></label>
</article>
<article id="article-2">
<h2>article 2</h2>
<label for="radio-1"></label>
<label for="radio-3"></label>
</article>
<article id="article-3">
<h2>article 3</h2>
<label for="radio-2"></label>
<label for="radio-4"></label>
</article>
<article id="article-4">
<h2>article 4</h2>
<label for="radio-3"></label>
<label for="radio-1"></label>
</article>
</section>
CSS
因为我们将使用易于风格化的标签进行导航，所以我们可以隐藏输入本身。
input{ display:none; }
将所有文章并排放置。
article{
position:absolute;
width:100vw;
}
article:nth-of-type(1){ left: 0 }
article:nth-of-type(2){ left: 100% }
article:nth-of-type(3){ left: 200% }
article:nth-of-type(4){ left: 300% }
我在标签中添加了“箭头”(只是一些可以点击的东西，在实际设计中，我会将这些字符切换为字体图标)。
label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}
最后，我们使用 css 选择器“~”，意思是“(及其子元素)之后的任何同级元素”。这样，我们就说“在第 N 个输入检查后，整个部分滑动到相应的位置”。
input[id$="-1"]:checked ~ section{ transform: translateX(0) }
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) }
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) }
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }
正是因为我们使用了这个选择器，所以我们的输入必须在滑动标签(此处为“section”)之外和之前，这样它们才能成为移动标签的 sibling (或其 parent 的 sibling )。
并且因为我们想观察移动的部分，所以我们添加了一个过渡属性:
section{ transition: all 1s; }
如果您将整个 HTML 包装到另一个标签中(以防止选择器“~”的影响传播到其他部分)，您可以为其他 slider 使用相同的 HTML 结构，而无需编写任何额外的 CSS!
这里有一个完整的教程和一个漂亮的工作演示(对于垂直版本，但别担心，它与水平版本非常相似):http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
PS:在 CSS 中，不要忘记为转换和转换添加所有供应商前缀。始终检查 w3schools.com(编辑:永远不要相信 w3schools，但请在线检查其他地方!)以了解需要哪些前缀。示例:
-webkit-transition: all 1s;
transition: all 1s;