滑块

基本元素

当我们在基石中制作最终将成为Slider拼图碎片的系统时，我们很早就知道我们想要将Slider的想法解构成它的组成部分，以便在最终用户将这些系统实现到他们的设计中时为他们提供更多的灵活性。这些包括:

• 滑动容器
• 滑动导航
• 幻灯片分页

除了从零开始构建，您还可以使用我们的.．.

预制元素

基石配备了两个基本的滑块，完全为您连接，并准备好直接定制的盒子。这包括滑块(内联)元素，它以线性的方式布局。导航这种类型的滑块将导致从一边到另一边的横向移动，每个页面被带入视口:

此外,滑块(堆)元素可用于每次显示一张幻灯片，并在滑块中导航时使用交叉渐变或效果过渡到另一张幻灯片:

每一个这些预制滑块都可以完全定制，以匹配您的设计，因为您认为合适，并简单地作为一个起点，为您快速启动和运行，而不必连接任何东西。每个滑块元素都带有滑动容器,滑动导航,而且幻灯片分页上面提到的基本元素。

---

注意:这些Prefabs包含的样式意味着作为一个基线，给你一些背景，当把这些元素放在你的页面上，你可以调整任何你想要检查Prefab内的任何元素，并相应地调整它。

特别值得注意的是这些预制滑块中的幻灯片导航，它利用了一种特殊的技术将自身垂直居中在幻灯片容器上，同时也不干扰其布局或单击事件。为了达到这种效果，在幻灯片容器和幻灯片导航周围放置了一个包装Div，它充当相对容器来定位其中的导航。接下来，Slide navigation会得到来自Cornerstone的最终CSS输出块:

/* // Notes // ~~~~~ // 01。来自Div. // 02上的位置控制组。来自Div上的Effects模块。*/位置:绝对;/* 01 */ top: 50%;/* 01 */ left: 0;/* 01 */右:0;/* 01 */ transform: translate(0px， -50%);/* 02 */

这将使导航垂直居中，同时在父容器中从左向右拉伸。最后一个变换的翻译(0 px, -50%)是否需要通过向上撞击来实现真正的垂直定心50%高度的:其固有高度的，如上图:50%;随着绝对定位实际上会稍微定位导航下面包装器的中线。最后，一个值1 em应用于padding-left而且padding-right这个Div的值来稍微偏移从视口边缘的箭头。

如果你想用前一步/下一步按钮实现的导航模式更多地依赖于直接在文档流中，或者具有与你截然不同的风格＇re之后，你可能会发现它更容易删除这个预制中的导航，然后拖进一个新的幻灯片导航元素，并开始从头开始构建。

滑动容器元素

的滑动容器是你计划在基石中构建的任何滑块的核心部分，是你个人的父容器吗幻灯片(可以把它看作是Row的类比，Row是任何Column的必需父元素)。这里也可以找到许多关于幻灯片基本布局和功能的配置选项。拖动它到您的实时预览，您将看到熟悉的”选择版面”UI发现在其他布局元素:

这只会在您的幻灯片容器中没有幻灯片的情况下显示，并通过添加预先确定的幻灯片数量和做一些简单的调整来从零开始构建幻灯片时提供一些快速启动点。

如果你想要完全从头开始建立你的滑块，你会想要把你的注意力转向检查器＇的控件。的布局而且选项控件看起来会根据配置的方式略有不同，但主要的区别在于您是否选择内联或堆放布局。

幻灯片导航元件

的滑动导航元素是一个简单的Div作为父元素，其中有两个Div元素作为按钮，用于从一个幻灯片导航到下一个Slider。每个按钮都有一个预先连线自定义属性我们将在后面讨论，它可以添加到任何元素，将它们变成导航按钮。

幻灯片分页元素

的幻灯片分页元素呈现动态滑块分页，它将在滑块页面做出相应调整时自动更新其标记。

视口和内容大小

在转到任何其他选项之前，重要的是要了解幻灯片容器如何＇年代视口溢出而且内容大小控件协同工作，为您的滑块创建基本结构，以及您可能想要更改它们的原因。

默认情况下，您拖入的每个幻灯片容器都有它的溢出的控制设置对照组设置为隐藏:

此溢出控制应用于幻灯片容器＇s的viewport，它是包装所有Slider标记的最外层HTML元素。它被设置为”隐藏的”默认情况下主要是使用内联布局，这样你的幻灯片就会横向移动- - - - - -超越了边缘- - - - - -浏览器和用于避免在内容上触发不必要的水平滚动条。

的内容大小控制组位于检查器下方，负责定义滑块内部内容的包含尺寸。就像行或网格一样，如果您将幻灯片容器放置为Section的直接子元素，则全球集装箱将在默认情况下启用:

如果幻灯片容器嵌套在Div、行或网格中，则此选项将默认禁用宽度设置为100％：

那么这一切是如何协同工作的呢?让＇S拖进我们的滑块(内联)starter(稍微重新设计了一些不同的内容，以更好地跟踪事情)作为Section的直接子元素，看看它是如何输出的:

现在我们＇我将添加一些大纲，以更好地可视化所发生的事情。的< span >视窗将由蓝色轮廓表示，而< span >主要内容由Content Sizing控件设置的尺寸将由粉色轮廓表示(通过添加类可以看到这些大纲show-outlines如果你需要自己进行故障排除):

注意这个视口是如何在浏览器中从一端延伸到另一端的，因为它不受已经设置了容器的父Div、Row或Grid的阻碍。然而，由于启用了全局容器选项，幻灯片容器的主要内容仍然居中并被包含(对于这个截图，全局容器正在使用94％为宽度，其最大宽度为1000 px，稍后会变得更相关)。

现在我们＇让我们来看看如果我们添加一行，在该行上放置一个全局容器，然后将我们的幻灯片容器放入特定的上下文中会发生什么:

你可以看到视口仍然在生成100％在本例中，它是一个已经启用全局容器的行，这就是为什么它不再是整个浏览器的宽度。因为我们的幻灯片容器＇s的内容大小控制设置为也使用全局容器，它被稍微插入，因为它使用相同的94％前面提到的价值。请记住，在这种情况下，您可能希望调整Content Sizing值以跨越视口的整个宽度，这样就不会出现这种双重包含效果。

请注意，由于视口无法跨越浏览器的整个宽度，在此场景中幻灯片是如何被切断的。这可能是你想要的输出的设计决策;然而，在这种情况下，你需要放置一个滑块在行，网格等，但仍然希望它跨越你的浏览器的宽度视觉上,这是回到设置对照组调整溢出控件来使用可见价值:

这将导致以下输出，你可以有一个滑块物理上包含在父元素中，但仍然有它在视觉上显示在整个视口中操作:

您可能希望在设计中使用此功能的另一个常见场景是不必s.由于视口默认情况下与幻灯片齐平，如果添加阴影，它们将显示为截断，而不进行任何调整:

然而，允许溢出在我们的视口可见，将允许显示完整的阴影:

这很有帮助”逃生出口”在绝对必要时使用，但请记住，从Slide Container中移除溢出可能会迫使内容出现水平滚动条。为了避免这个问题，转到滑块的父部分进行设置它的溢出控制为隐藏。这将避免跨设备的任何不良影响。

最后要注意的一件事是填充控件的设计部分。此控件的值直接输出到幻灯片容器的视口，这是创建阴影或任何其他视觉上超出幻灯片容器边界的内容所需的偏移量的另一种有用的方法＇不需要禁用它的默认溢出值。

布局控件

的布局内联和堆叠滑块类型的控件如下:

您会注意到，在使用内联布局时，有更多的选项可用。让＇let’我们花点时间来运行一下内联特定的控件，然后在最后讨论如何在两种滑块类型之间使用对齐控件。

的幻灯片控件允许您进行选择分页或汽车、我们将在后面详细讨论。

Paged很可能是您在大多数情况下想要使用的，因为它在内容区域中均匀地分布您的幻灯片。这是与#每页控件，该控件指定每页应该显示多少个幻灯片。使用上面看到的设置，你会看到以下输出:

注意内容区是如何完全被一个幻灯片填满的。如果我们将# Per Page控件更改为2，我们会看到以下结果:

你会注意到我们现在看到两个幻灯片均匀分布在我们的内容区域中，而且我们的幻灯片分页元素已经更新了它的分页计数。因为我们有六个幻灯片在我们的例子中，分页计数更新如下:

• 当#每页是1， 6项显示在幻灯片分页。
• 当#每页是2， 3个项目显示在幻灯片分页。

# Per Page控件的伟大之处在于它是充分响应,这意味着你可以在不同的设备上更新内容区中显示的幻灯片数量。例如，您可能希望显示3.在桌面上每一页的幻灯片，然后有它的响应2在平板电脑上1在移动。这允许您有更大的响应灵活性，因此您的幻灯片不会在较小的屏幕上变得太拥挤，任何相关的幻灯片分页元素将根据这些响应变化更新其项目计数。

接下来，我们有差距控件，该控件允许您更改幻灯片之间的间距。您可以增加这个量，甚至完全删除它，以使您的幻灯片彼此齐平。与# Per Page控件一样，Gap是完全响应的，这意味着您可以在不同设备上更改幻灯片之间的间隔，为您的设计提供了很大的灵活性。

的证明控件处理内容如何在幻灯片容器的水平轴上分布。这是你赢得的更高级的功能＇看不到任何可观察到的变化，除非您将它与其他几个配置选项一起使用，我们将在后面讨论。

的对齐内联和堆叠滑块的控件处理内容如何分布在滑块容器的垂直轴上＇除非您的幻灯片根据内容有不同的高度，否则不会产生任何效果。例如，让＇假设您有一个滑块，每个滑块中都有一些简单的文本内容，默认的对齐值为拉伸将确保所有幻灯片看起来具有相同的高度，即使它们的内容不匹配:

将控件设置为开始将所有的幻灯片对齐到幻灯片容器的顶部:

中心将如下所示:

和结束将如下所示:

而内联滑块使用Flexbox为了给它的布局提供动力，堆叠滑块使用了1x1CSS网格每个幻灯片都定位在单元格空间上。这样做是为了避免需要任何笨重的JavaScript来确保幻灯片内容之间的等高。这意味着默认情况下，您创建的每个滑块将始终假定在您的设置中最高滑块的最大高度。在处理内容时请记住这一点。

选项控制(内联)

的选项内联滑块类型的控件如下:

• 播放 - - - - - -默认禁用。如果设置为间隔,将在下面显示一个定时控件，它决定了“幻灯片/页面”作为”当前活动”在自动前进到下一个之前，先滑动/翻页。如果选框，下面将显示一个速度控件，该控件用于确定内容的线性移动应该进行的速度。
• 包装 - - - - - -设置为重置默认情况下，这意味着当您到达内容的末尾时，单击”下一个”导航按钮将重置到滑块中的第一个位置。此外,旋转木马将克隆你的内容在任何一端，创造一个无限循环的内容。
• 包含 - - - - - -设置为忽略默认情况下，它指示新激活的幻灯片/页面填充之前激活的幻灯片/页面的空间。包含将确保当前幻灯片/页面始终与”结束”幻灯片容器中的主要内容。
• 高度 - - - - - -隐藏，除非将对齐设置为其他内容除了伸展,因为如果所有的幻灯片都被拉伸，它们将是相同的高度，这个功能不能工作。设置为静态默认情况下，这意味着幻灯片容器将始终是列表中最高的幻灯片的高度。将此控件设置为自适应会有你的幻灯片容器吗＇年代高度通过JavaScript动态设置，以匹配您的当前内容。这意味着您的滑块将只与最大的当前内容一样高，确保它不会＇从视觉上看，T似乎占了太多的高度＇t。这在某些情况下是可取的，但由于对低功率设备的潜在性能考虑，应该少量使用。
• 交互 - - - - - -默认禁用。如果设置为点击,在滑动条中单击非锚的幻灯片将导航到该幻灯片。如果设置为阻力,支持滑动手势来导航您的内容。
• 滚动 - - - - - -隐藏，除非交互设置为阻力。设置为提前默认情况下，它确保在一个导航运动或触摸手势后，当前活动的幻灯片将根据幻灯片容器的总体布局调整为适当的对齐方式。免费的alows滑动条可以自由滚动，而不会卡住。
• 滚动的 - - - - - -设置为内容默认情况下，这意味着随着滑块的每次导航移动，内容将根据主要内容区域的宽度进行转换。如果设置为幻灯片,内容一次只能移动一个幻灯片，无论布局如何(例如，您可以将幻灯片容器设置为在布局中分页，每页显示3张幻灯片，但每次只显示1张幻灯片，而不是使用此设置的整个内容宽度)。
• 过渡 - - - - - -设置导航时滑块内容移动的持续时间和缓和曲线。

选项控制(堆叠)

的选项堆叠滑块类型的控件如下:

• 播放 - - - - - -默认禁用。如果设置为间隔,一个定时控件将显示在下面，它决定了幻灯片作为”当前活动”在自动跳转到下一个之前先滑动。
• 高度 - - - - - -隐藏，除非将对齐设置为其他内容除了伸展,因为如果所有的幻灯片都被拉伸，它们将是相同的高度，这个功能不能工作。设置为静态默认情况下，这意味着幻灯片容器将始终是列表中最高的幻灯片的高度。将此控件设置为自适应会有你的幻灯片容器吗＇年代高度通过JavaScript动态设置，以匹配您的当前内容。这意味着您的滑块将只与最大的当前内容一样高，确保它不会＇从视觉上看，T似乎占了太多的高度＇t。这在某些情况下是可取的，但由于对低功率设备的潜在性能考虑，应该少量使用。
• 刷卡 - - - - - -默认禁用。你可以在X或Y独立轴，或者如果需要，两者都可以。如果你想用Effects创建一个假的垂直滑块，这些选项会很有帮助;在这种情况下，你可能不希望X轴上的交互被用来确定导航意图。
• 入口 ＆退出 - - - - - -都开始褪色它将在您从一张幻灯片过渡到下一张幻灯片时产生简单的交叉褪色效果。如果设置为效果,这张幻灯片＇年代滚动效果在Effects模块对应的状态将被使用。如果设置为没有一个在入口，过渡将立即发生从一个幻灯片到下一个。如果设置为没有一个在退出时，前一个幻灯片将保持静止，而新的当前幻灯片将移动到顶部。如果需要的话，这可以用来创建独特的分层效果。
• 过渡 - - - - - -设置导航时滑块内容移动的持续时间和缓和曲线。

使用滚动效果

的滚动效果在Effects模块与基石紧密结合＇的滑块系统，并可用于创建高度互动和独特的设计。

作为一个例子，这里有一个内联滑块分页与它的#每页控件设置为3.，在主要内容中给出3张间隔均匀的幻灯片。接下来,包装控制设置为旋转木马内容循环(这就是为什么你在看”6”就在”1”)，然后滚动的已经设置为幻灯片,所以我们＇我们每次只移动一张幻灯片，而不是整个页面(这也确保了一次只考虑一张幻灯片”活跃的”)．最后,证明布局选项设置为中心,这意味着我当前活动的幻灯片应该始终处于主要内容的正中央:

现在我们有了基本的设置，让＇让我们在每张幻灯片上玩一下滚动效果。对于这个例子，我＇我要去看一看我的当前的幻灯片是完全不透明度和缩放到它的完整大小，而我的其他幻灯片是淡出和缩放一点。为此，您可以设置您的入口而且退出每张幻灯片的滚动效果如下所示:

这样做将导致以下输出:

现在，当您在内容中导航时，您的幻灯片将在进入/退出此状态时切换”当前的”滑块的位置。这些效果转换的时间将由过渡控制幻灯片容器，确保所有东西都完美对齐。

嵌套元素的滚动效果也受到这个机制的尊重，这意味着你可以拥有一个充满内容的幻灯片，当它过渡到”当前的”position用滚动效果触发其子函数来执行它们的进入效果(相反，当它们移出该位置时，也会触发其子函数的退出效果)。滑块中的子元素滚动效果不与幻灯片容器的转换控件值同步，允许您以创造性的方式执行步进动画和暂停时间。此外，虽然滑动子元素仍然在滚动效果下显示它们的偏移量和行为控件，但在此上下文中它们是不活动的。

自定义属性

有一些自定义属性当你从零开始创建自己的slider时，你会想要知道这些，因为它们可以用来帮助定义某些标记块的功能。

• data-x-slide-context - - - - - -不是必需的，但可以用来更清楚地定义”上下文”以及哪些元素应该相互关联。默认情况下，每个幻灯片容器都创建自己的上下文，放置在它附近的任何导航/分页元素都应该创建上下文”只是工作”开箱即用。然而，如果你在一个Section中放置多个滑块和多个导航元素，这种情况下，你可能想要上到每个滑块的唯一父滑块，并将此属性放在它上面，以避免滑块之间的任何交叉。另外，这样会对搬家有些帮助自定义属性我们＇i’我在此上下文中引入了从Slide Container到此上下文的高级样式，允许您在设计中的其他元素上使用这些样式(稍后详细介绍)。
• data-x-slide-prev - - - - - -添加到任何元素，使其成为滑块的导航项，将带您到以前的页/滑动你的列表。
• data-x-slide-next - - - - - -添加到任何元素，使其成为滑块的导航项，将带您到下一个页/滑动你的列表。
• data-x-slide-goto - - - - - -添加到任何元素，使其成为滑块的导航项，将带您到特定数值索引您提供的列表中的任何页面/幻灯片。例如，应用data-x-slide-goto = " 3 "到任何元素将意味着单击该元素将总是带您到第三滑动你的内容。这可以用来用库中的任何元素为滑块创建完全自定义的导航。这里需要注意的一点是，您的标记不能像Slide Pagination Element那样对# Per Page选项中的更改做出响应。

属性可以在需要的地方添加这些属性自定义属性控件下的定制对照组的任何元素:

---

注意:data-x-slide-prev，data-x-slide-next,data-x-slide-goto支持滚动效果就像幻灯片。它的工作原理是如果你用的是non-carousel滑动条并对这些导航项应用滚动效果，它们将过渡到退出当你在他们相应的时候”结束”滑块的。相反，他们会过渡到他们的入口当有他们可以导航到的内容时进行声明。

例如，如果您应用滚动效果，目的是淡出您的data-x-slide-prev项，当你的滑块在第一张幻灯片此项目将淡出(因为没有”以前的”要导航到的幻灯片)。当你转到第二张幻灯片的时候data-x-slide-prev是否会淡出到入口状态，因为现在有了它可以导航的内容回来出现。这同样适用于你的data-x-slide-next项，只关于内容朝结束你的滑块。

在某些情况下，你可能需要应用滚动效果到你的data-x-slide-prev而且data-x-slide-next物品，但你没有＇我们不希望它们响应滑块内容的末尾(例如，如果您的导航项是内部一个幻灯片，你正在使用滚动效果使它们在幻灯片时淡入”当前的”)．如果是这种情况，您可以添加noDisable作为一个价值你的自定义属性，它会关闭这个特性:

自定义属性

如果你＇如果你真的想让你的滑块设计更上一层楼，你可能想要考虑利用角斯通＇年代自定义属性可在幻灯片上下文和单个幻灯片上使用。这些可以在您的CSS中用于创建动态元素和过渡，为您的设计添加一个全新的复杂水平。

控件上有三个可用的属性幻灯片背景你的滑块。记住，默认情况下这是幻灯片容器，或无论你在哪里应用data-x-slide-context就像前面提到的那样，在你的标记树上:

• ——x-slide-current - - - - - -返回一个反映滑块当前活动状态的整数。
• ——x-slide-total - - - - - -返回一个反映滑块中滑动条总数的整数。
• ——x-slide-autoplay-progress - - - - - -如果你的幻灯片容器有播放控件启用后，此自定义属性将从返回不断递增的浮点数0来1指示当前幻灯片的进度。例如，如果您设置您的幻灯片容器使用自动播放，并希望您当前的幻灯片保持在屏幕上8000毫秒，它会返回0在0女士，０．２５在2000毫秒，0．5在4000毫秒等等等等。请记住，这个自定义属性的值是不断递增的，这意味着它们可以用于在与进度相关的幻灯片中的元素上创建线性缓和过渡。

此外,每幻灯片在滑块中会收到以下两个自定义属性:

• ——x-slide-balance - - - - - -返回1，0,或1取决于幻灯片相对于的位置”当前的”幻灯片。1之前,0对于当前，和1后。
• ——x-slide-distance - - - - - -对象的距离返回一个正整数”当前的”幻灯片。返回0为活动的幻灯片，那么1下一张幻灯片，2下一张幻灯片，等等。

那么如何使用这些自定义属性呢?好吧,让＇S建立在我们之前的例子，看看我们是否可以创建一个很酷的覆盖流效果。要做到这一点，可以对退出状态:

(calc(20度* (var(——x-slide-balance) * -1) * clamp(1, var(——x-slide-distance)， 2))))

下面是入口状态:

角度(1000 px) rotateY(0度)

所有这些都将写入每张幻灯片＇年代滚动效果前面提到的价值:

并会产生以下结果，每一张幻灯片都远离”当前的”滑梯:滑梯在其移动的方向上不断地向外旋转:

那么这一切是如何运作的呢?

1. 为每一步选择一个基础旋转(20度在这种情况下)。
2. 取——x-slide-balance给它赋值并乘以1翻转方向，使旋转向中心而不是向外移动。
3. 夹具(1,var(——x-slide-distance)， 2))定义值的上界和下界。基本上，这意味着这个值不应该低于这个值1或以上2这使我们的旋转在远离当前幻灯片时，在其末端看起来不会太剧烈。看看中数要了解更多关于夹()。

把这三个值乘在一起钙()我们放在rotateY ()Transform根据这些自定义属性的更新值为每一步提供动态变化。

重要提示:上面提到的入口和出口值需要在每张幻灯片上是相同的，这样才能工作。因此，我们通常建议只在使用类时预形成复杂转换毛圈列表的幻灯片，你只需要定义你的转换一次，然后自动应用到每一张幻灯片。

动态内容

除了前面提到的所有内容，如果你想使用下面的动态内容字符串，它们将与你的滑块实时更新:

• {{dc:rvt:outlet state="slider" key="current"}} - - - - - -对象包装的字符串< span >它反映了滑块的当前索引。
• {{dc:rvt:outlet state="slider" key="total"}} - - - - - -对象包装的字符串< span >反映滑块中索引的总数。

它们可以在任何基于文本的元素中使用，例如文本,标题,或按钮在页面上创建动态标记。

视频教程

想看到新的滑块在行动吗?随着我们带您通过整个元素前面到后面。注意视频中不同的章节对特定的领域感兴趣。