如何使用jQuery / CSS3创建“幻灯片库面板”？ [英] How to create 'Slide-in gallery panels' with jQuery/CSS3?

问题描述

通常我知道如何开始，有几个教程或甚至经验，但在这一点上，我甚至不知道如何调用它。也许只是告诉我如何正确地定义这可能是一个解决我的问题（ - >根据名称，我可以正确搜索）。

Normally I know how to start off, have a few tutorials or even experience, but at this point I don't even know how to call it. Perhaps just by telling me how to correctly define this could be a solution to my problem (-> based upon name, I can correctly search).

让我们快速给你我刚刚做的模型。

Let's give you this quick mockup I just made.

我在看1：你怎么叫这个，但是特别是2：我该如何创建呢？

I'm looking for 1: how do you call this, but especially 2: How would I create such?

我想创建面板，在每个面板上的下一步按钮，您可以将该面板向左（或向右（向后））移动，以转到下一个磁贴。让我们假设每个面板是一个投资组合项目（垂直堆叠），在每个面板（投资组合项目）中，您可以水平滑动，然后在每个图块上解释项目的一部分。

I would like to create panels, a few stacked above eachother and with the click of the 'next' button on each panel, you can move that panel to the left (or right (backwards)) to go the next tile. Let's say that each panel is a portfolio project (vertically stacked) and within each panel (portfolio project), you can slide horizontally next and back to explain a part of your project on each tile.

每个图块的布局由具有完整背景图片（ background-size：cover ）和一半宽度的图块文本框的图块组成。当然，框的文本应该用HTML写，而不是烧到图像，通过使用Photoshop，响应原因。

The layout of each tile consists of a tile with a full background image (background-size:cover) and half a width tile text box. Of course, the text for the box should be written with HTML, instead of 'burned' into the image, by use of Photoshop, for responsive causes.

我假设这可以用CSS3和jQuery创建。唯一的问题是：我的所有Google搜索结果没有什么，或导致画布导航菜单，我不是寻找。

I assume this can be created with CSS3 and jQuery. The only problem is: All my Google searches end up nothing or resulting in Off-canvas navigation menus, which I'm not looking for.

要回答这个问题，请：
1.定义如何调用/我可以在google搜索这个$
2.链接到一个好的教程/插件
3.写出代码，如果这很简单。

To answer this question, either: 1. Define how this is called/I can search for this at google 2. Link me to a good tutorial/plugin 3. Write out the code if it would be that simple.

感谢一大群人！

推荐答案

这实际上很简单，使用 radio hack 。您可以使用只有html和CSS （用于平滑过渡的CSS3）来执行此操作，这非常明显，因为jquery代表您的客户下载的大块。

This is actually very simple using what is called the radio hack. You can do it with only html and CSS (CSS3 for smooth transitions), which is very appreciable as jquery represents a big chunk for your clients to download.

基本上是这样的（这里的工作演示： http://codepen.io/anon/ pen / jcgxI ）：

Basically this is how it goes (working demo here: http://codepen.io/anon/pen/jcgxI):

HTML

无线电设置输入以确定应该显示哪个选项卡。收音机在这里是完美的，因为当一个是检查，所有其他必须取消选中。因此，请确保整个集合的NAME属性相同。

We use a radio set of inputs to determine which "tab" should appear. Radios are perfect here because when one is check, all other must be unchecked. For that reason, make sure the attribute NAME is the same for your entire set.

    <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的引用任何输入的标签来完成。

We then write our content wrapped within any tag really (the structure section > article seems fitting). The navigation, even though it could be done via clicking on the radio buttons themselves can also be done through clicking on labels that refer to any input through their attribute FOR set to the ID of the one they refer to.

<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

因为我们将使用易于风格化的标签进行导航，所以我们可以隐藏输入本身。

Because we will navigate with easily stylized labels, we can just hide the inputs themselves.

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

我在标签中添加箭头（只需点击一下，在实际设计中，我会将这些字符切换为字体图标）。

I add "arrows" in the labels (just something to click on, in real design, i'd switch these characters to a font icon).

label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}

最后，我们使用css选择器〜任何兄弟元素之后（和他们的孩子）。这样，我们说在第N个输入被检查后，整个部分滑动到相应的位置。

Finally, we use the css selector "~" that means "any sibling element after (and their children)". This way, we are saying "after the Nth input checked, the whole section slides to the corresponding position".

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%) }

$ b滑动标签（这里是部分），以便它们是移动标签（或其父对象的兄弟姐妹）的兄弟。

It is because we use this selector that it is important that our inputs be outside and before the sliding tag (here "section") so that they are siblings of the moving tag (or siblings of its parents).

因为我们要观察部分移动，我们添加一个transition属性：

And because we want to observe the section moving, we add a transition property:

section{ transition: all 1s; }

如果你将整个HTML包装到另一个标签（防止选择器〜传播到其他部分），您可以为其他滑块使用相同的HTML结构，而无需编写任何额外的CSS！

And if you wrap the whole HTML into another tag (to prevent the effect of selector "~" to propagate to other sections), you can use an identical HTML structure for other sliders without having to write any additional CSS!

完整的教程 美丽的工作演示（对于垂直版本，但不要担心，它非常类似于水平）可以在这里： http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with -smooth-transitions /

A full blown tutorial with a beautiful working demo (for vertical version but don't worry, it's very similar to horizontal) is available here: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

PS：在CSS中，不要忘记为转换和转换添加所有供应商前缀。始终检查w3schools.com（编辑：从不信任w3schools，但在其他地方在线检查），以了解需要哪些前缀。示例：

PS: in the CSS, don't forget to add all vendor prefixes for transition and transform. Always check w3schools.com ( never trust w3schools but do check somewhere else online!) to know which prefixes are needed. Example:

-webkit-transition: all 1s;
transition: all 1s;

这篇关于如何使用jQuery / CSS3创建“幻灯片库面板”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！