有人能指出我需要做些什么才能自定义Zurb Foundation-4“ORBIT”图像滑块吗?
有些事我想改变。例如: - 我希望箭头图形是自定义设计的。 - 我想要定制子弹图形。 - 我希望子弹背景区域可以自定义。 - 我希望图像描述区域不具有深色背景,并且还使用自定义Google Web字体 等
我无论如何都找不到有关这些方面的任何文件。 任何帮助表示赞赏。
答案 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
它对我有用!