如何使用jQuery / CSS3创建“滑入式画廊面板”？
通常我知道如何开始，有一些教程甚至经验，但在这一点上，我甚至不知道如何调用它。 也许只是告诉我如何正确定义这可能是我的问题的解决方案（ – >基于名称，我可以正确搜索）。
让我们给你一个我刚刚制作的快速模型。 
我正在寻找1：你怎么称呼它，尤其是2：我将如何创造这样的？
我想创建面板，一些堆叠在彼此之上，并且通过单击每个面板上的“下一个”按钮，您可以将该面板向左移动（或向右（向后））以移动到下一个贴砖。 假设每个面板都是一个项目组合项目（垂直堆叠），并且在每个面板（项目组合项目）中，您可以在下一个和后面水平滑动，以便在每个图块上解释项目的一部分。
每个图块的布局由具有完整背景图像的图块（ background-size:cover ）和半个宽度图块文本框组成。 当然，盒子的文本应该用HTML编写，而不是通过使用Photoshop“刻录”到图像中，以用于响应原因。
我假设这可以用CSS3和jQuery创建。 唯一的问题是：我的所有Google搜索都没有结果，或者导致了Off-canvas导航菜单，这是我不想要的。
要回答这个问题，要么：1。定义如何调用/我可以在谷歌搜索这个2.将我链接到一个好的教程/插件3.写出代码，如果它会那么简单。
谢谢大家伙！
使用所谓的无线电黑客实际上非常简单。 你可以只使用html和CSS （CSS3进行平滑过渡），这非常值得注意，因为jquery代表了客户下载的一大块。
基本上这是它的方式（在这里工作演示： http ： //codepen.io/anon/pen/jcgxI ）：
HTML
我们使用一组无线电输入来确定应该出现哪个“标签”。 无线电在这里是完美的，因为当检查一个时，所有其他的必须是未选中的。 因此，请确保整个集合的属性NAME相同。
然后我们将我们的内容写入任何标签中（结构部分>文章似乎合适）。 导航，即使可以通过单击单选按钮本身来完成也可以通过单击标签来完成，这些标签通过其属性FOR引用任何输入设置为他们所引用的ID。
article 1
article 2
article 3
article 4
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{ transition: all 1s; }
如果你将整个HTML包装到另一个标签中（为了防止选择器“〜”的效果传播到其他部分），你可以为其他滑块使用相同的HTML结构，而无需编写任何额外的CSS！
这里有一个完整的教程，有一个漂亮的工作演示 （垂直版本，但不要担心，它与水平非常相似）： http ： //tympanus.net/codrops/2012/06/12/css-only-responsive -layout与-光滑过渡/
PS：在CSS中，不要忘记为转换和转换添加所有供应商前缀。 请务必查看w3schools.com（ 编辑：从不信任w3schools，但在网上其他地方检查！ ），以了解需要哪些前缀。 例：
-webkit-transition: all 1s; transition: all 1s;