css - 自定义 Zurb Orbit 插件

Question

有人可以指出我需要做什么来自定义 Zurb Foundation-4“ORBIT”图像 slider 的正确方向吗？

有些事情我想改变。例如:- 我想要定制设计的箭头图形。- 我想要自定义元素符号图形。- 我想要自定义元素符号背景区域。- 我希望图像描述区域不要有深色背景，并为其使用自定义的 Google Web 字体等

不知何故，我找不到关于这些方面的任何文档。感谢您的帮助。

Answer 1

I want the arrow graphics to be custom designed

Orbit 组件中没有使用图像。箭头图标、上一个和下一个图标是在 CSS 中创建的，最好遵循相同的模式(不使用图像)。但是，您可以按照您想要的任何方式对其进行自定义。以下是您需要研究(和覆盖)的类:

以下是适用于“箭头”图标背景的类。

.orbit-container .orbit-prev, .orbit-container .orbit-next

以下是箭头图标:

.orbit-container .orbit-prev > span

.orbit-container .orbit-next > span

I want the bullets graphics to be customized. - I want the bullets background area to customize

同样，元素符号没有使用图像，它们是在 css 中创建的。这是您需要查看和修改的类:

.orbit-bullets li - 适用于轨道中的所有子弹

.orbit-bullets li.active - 轨道中的事件子弹

I want the Image Description area NOT to have a dark background

这是你需要修改的类和属性

.orbit-container .orbit-slides-container > * .orbit-caption

如果对 CSS 有很好的了解，您可以轻松地覆盖这些类并应用您自己的类。