自定义Zurb动态观察插件

Question

有人能指出我需要做什么来定制Zurb Foundation-4 "ORBIT“图像滑块的正确方向吗？

有些事情我想改变。例如：-我希望箭头图形是自定义设计。-我想要自定义项目符号图形。-我想要自定义项目符号背景区域。-我希望图像描述区域不要有一个黑暗的背景，也使用自定义的谷歌网络字体等。

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

Answer 1

我希望箭头图形是自定义设计

动态观察组件中没有使用任何图像。箭头图标，上一个和下一个图标，是在CSS中创建的，最好遵循相同的模式(不使用图像)。但是，您可以随心所欲地对其进行自定义。以下是您需要查看(并覆盖)的类：

下面是应用于“箭头”图标背景的类。

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

以下是箭头图标的图标：

.orbit-container .orbit-prev > span

.orbit-container .orbit-next > span

我想要的子弹图形是自定义的。-我想要自定义项目符号背景区域

同样，没有图像用于项目符号，它们是在css中创建的。下面是您需要查看和修改的类：

.orbit-bullets li -用于轨道中的所有项目

.orbit-bullets li.active -轨道中活动的项目符号

我希望图像描述区域不要有黑色背景

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

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

对CSS有很好的了解，你可以很容易地覆盖这些类并应用你自己的类。

Answer 2

在这里查看这个问题的答案：orbit slideshow custom next prev buttons links left right arrows

它对我起作用了！