自定义Zurb Orbit插件

时间:2013-04-26 19:56:51

标签: css zurb-foundation

有人能指出我需要做些什么才能自定义Zurb Foundation-4“ORBIT”图像滑块吗?

有些事我想改变。例如: - 我希望箭头图形是自定义设计的。 - 我想要定制子弹图形。 - 我希望子弹背景区域可以自定义。 - 我希望图像描述区域不具有深色背景,并且还使用自定义Google Web字体 等

我无论如何都找不到有关这些方面的任何文件。 任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:3)

  

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

Orbit组件中没有使用图像。箭头图标,上一个和下一个图标是在CSS中创建的,最好遵循相同的模式(不使用图像)。但是,您可以根据需要自定义它。以下是您需要研究(和覆盖)的类:

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

<强> .orbit-container .orbit-prev, .orbit-container .orbit-next

以下是箭头图标:

<强> .orbit-container .orbit-prev > span

<强> .orbit-container .orbit-next > span

  

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

同样没有图像用于子弹,它们是在css中创建的。这是您需要研究和修改的课程:

.orbit-bullets li - 适用于Orbit中的所有项目符号

.orbit-bullets li.active - 针对Orbit中的活动项目符号

  

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

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

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

熟悉CSS,您可以轻松覆盖这些类并应用自己的类。

答案 1 :(得分:0)

在此查看此问题的答案: orbit slideshow custom next prev buttons links left right arrows

它对我有用!