受到团队的信任
为你的项目添加一个滑块并设置样式——Webflow设计器中最简单、最强大的组件之一。
使用滑块创建幻灯片，以呈现图像，文本，视频-你的名字。
当一个滑块被添加到画布上时，你会注意到它占据了父元素的全部宽度。
一旦滑块在页面上，我们可以看到该组件有4个子组件。
滑动条默认有两个幻灯片。您可以通过以下三种方式添加更多的幻灯片:
你可以通过四种方式浏览我们的幻灯片:
您也可以使用滑块设置中的滑块菜单转到特定的滑块。
您可以将图像元素拖放到幻灯片中。或者您可以向幻灯片添加背景图像，以便稍后可以轻松地将额外的内容放置在顶部。
与div块或节一样，幻灯片也可以包含其他组件。如果我们在body中添加滑动器，我们可以在幻灯片中添加一个容器，然后在容器中添加一个标题和一个段落。
在设置面板(D)有很多设置来控制滑块的行为，包括:
动画类型-设置幻灯片在幻灯片之间移动时的外观。
放松的方法-改变缓动方法如何幻灯片之间的过渡幻灯片。
持续时间-指示幻灯片转换到另一张幻灯片需要多长时间。
滑动手势-启用或禁用触摸设备上的滑动手势。如果幻灯片的特定时间对你的设计很重要，这尤其有用。
汽车比赛-设置第一张幻灯片需要多长时间来改变(自动播放)，以及在滑块完全停止改变幻灯片之前，它应该经过多少张幻灯片。
第一个和最后一个幻灯片箭头-关闭第一张幻灯片的左箭头和最后一张幻灯片的右箭头。
滑动导航控件-选择导航按钮的间距，形状和反向颜色。
您可以样式和自定义滑块元素的任何方式，您喜欢。下面是一些常用的定制滑动条的方法。
您可以通过选择。来调整滑块大小滑块，并在样式面板中设置不同的高度。注意，当你这样做的时候，如果背景图像被设置为覆盖，它会相应地调整大小。
上面的例子将滑块的高度更改为像素单位的高度。您还可以根据视口高度(vh)设置高度。了解更多关于不同的宽度和高度单位。
如果你需要调整宽度，你可以移动滑块到一个更大或更小的父元素。在这个例子中，滑动条的位置就像一个section，所以它占据了整个页面的宽度。
默认情况下，滑块中使用的箭头将垂直居中，看起来像白色箭头图标。你可以通过以下步骤来调整这些图标的外观:
对另一个箭头做同样的操作。
如果您想为您的滑块自定义箭头图标，您可以简单地删除图标元素内部的左箭头或右箭头元素。然后拖动您自己的图像到左右箭头元素。
幻灯片导航点的样式有点复杂。您可以更改的点的大小和数字标签的数量通过更新字体大小。您可以更改标签的数量通过应用字体颜色．然而，要改变实际的点或正方形的颜色，您需要在自定义嵌入元素中输入一些CSS。
所以，如果你想改变点的颜色，添加以下嵌入元素在您的页面:
<时尚>
.w-slider-dot {
背景:蓝色!重要;
｝
.w-slider-dot.w-active{
背景:海军!重要;
｝
> < /风格
您甚至可以使用边框和其他属性创建自定义形状。
在这个例子中，我们将通过粘贴以下代码为选中/激活状态创建空点:
<时尚>
.w-slider-dot {
背景:# 4353 ff !重要;
border: 3px solid # 4335ff !
｝
.w-slider-dot.w-active{
颜色:# 4353 ff !重要;
背景:没有!重要;
border: 3px solid # 4335ff !
｝
> < /风格
如果您不想在设计中使用幻灯片的任何部分，都可以将其隐藏。以下是如何做到这一点:
您还可以将slider元素自定义为一个旋转木马滑块—一次显示多个幻灯片。下面是如何制作一个每次显示3张幻灯片的滑动条:
如果您需要编辑幻灯片以区别于其他幻灯片(例如，不同的背景图像)，您可以为每个幻灯片添加不同的组合类。
作为一种变通方法，您可以添加一个收藏列表每个幻灯片。然后，限制该列表中显示的项的数量，只显示一个Collection项。
每个幻灯片都需要它自己的集合列表。创建了第一个集合列表后，就可以复制幻灯片了。然后，只需将每张幻灯片收集列表的“start at”编号更改为对应于幻灯片编号的项目(例如，幻灯片1，项目1 /幻灯片2，项目2)。
