我正在使用 zurb 基础轨道幻灯片。页面左右边缘的下一个和上一个按钮或链接是默认的黑色三角形。请看一下这个测试页面：
http://www.endsnore.com/_test1b/index.aspx
如何自定义下一个和上一个按钮或链接？如何添加我自己的箭头代码：‹ 和 › 或者添加我自己的自定义箭头图像
喜欢这里的橙色左右箭头： http://www.getaveo.com/index.aspx
请提供确切的代码示例。我会很感激。非常感谢您！
【问题讨论】：
标签： slideshow zurb-foundation next orbit arrows
我在 stacey.mosier 的回答中取得了成功，并且能够使用 CSS 内容属性将我的箭头更改为图像。 使用 Foundation v5.2.2
单个类的工作代码如下所示：
.orbit-next {
content: url("Homepage/Homepage_Banner_Arrow_Next_on_retina.png");
width: 16px !important;
height: 62px !important;
margin-right: 20px;
}
我将 .orbit-next 类的宽度和高度设置为等于我添加的图像的宽度和高度。
对于悬停样式：
.orbit-container .orbit-next:hover {
content: url("Homepage/Homepage_Banner_Arrow_Next_off_retina.png";
background-color: transparent; //so there's no background effect
对于.orbit-previous，规则与上面基本相同（除了margin-right变成margin-left并且你使用prev箭头路径而不是next）
为了保持 DRY，我改为实现了一个“多重选择器”，现在只需要一个箭头资源，通过 css 转换旋转当前资源
.orbit-next, orbit-prev { //All the above rules except the margin }
.orbit-next { margin-right: 20px; }
.orbit-prev { margin-left: 20px; transform:rotate(180deg); }
.orbit-container .orbit-next:hover, .orbit-container .orbit-prev:hover {
//the above hover rules
}
我预计需要根据当前活动的列宽来缩放/隐藏箭头的大小，这是需要考虑的事情，但超出了这个问题的范围。希望这有帮助！
【讨论】：
我认为这更简单一些：
对于 Foundation 5 - 这是你的 jQuery：
$( "a.orbit-prev > span " ).replaceWith( "<img src='images/left_arrow.png' width='68' height='78' />" );
$( "a.orbit-next > span" ).replaceWith( "<img src='images/right_arrow.png' width='68' height='78' />" );
将图片网址替换为您自己图片的网址，以及您自己图片的高度/宽度的高度/宽度。要使用字体图标，我会这样做：
$( "a.orbit-prev > span " ).replaceWith( "<span><i class='icon-chevron-left'></i></span>" );
$( "a.orbit-next > span" ).replaceWith( "<span><i class='icon-chevron-right'></i></span>" );
您也需要覆盖默认的 css 样式才能使用图像：
.orbit-container .orbit-prev, .orbit-container .orbit-next {
text-indent: 0px !important;
line-height: 78px;
height: 78px;
width: 68px;
}
将文本缩进保持为 0，并使用您自己的高度/宽度。对于图标字体，我没有尝试过，但我认为您应该可以毫无问题地使用现有的 CSS。
您可能也想删除悬停状态，但可能不会：
.orbit-container .orbit-prev:hover, .orbit-container .orbit-next:hover {
background-color: transparent; }
【讨论】：
亲爱的朋友们！请为您的ORBIT烦恼找到完整的解决方案。 作为导航箭头，制作自定义按钮（图像或 V 形或字体-“Font Awesome”）需要 5 分钟。
在你的 js 中：
$(".next-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-next").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
$(".prev-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-prev").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
在你的 CSS 中：
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
.next-slide {/* PUT YOUR STyLES HERE*/}
.prev-slide {/* PUT YOUR STyLES HERE*/}
与上面相同的js
css：
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
html：
<span class='prev-slide'><i class='icon-chevron-left'></i></span>
<span class='next-slide'><i class='icon-chevron-right'></i></span>
就是这样！喜欢就给我点个赞吧！
【讨论】：
$('.orbit-prev').click() 和 $('.orbit-next').click() 激活现有的上一个/下一个按钮会更快（更少的 DOM 遍历）。
使用 orbit 我发现了一个非常好的解决方案：通过 CSS 在 .orbit-prev span 和 .orbit-next span 标签上使用 :before，您可以修改导航按钮。
我不认为您可以在不编辑滑块的 js 代码的情况下将图像添加为按钮，但是此解决方案效果很好，您显然可以根据需要对其进行调整
在此处查看 jsFiddle：http://jsfiddle.net/endorama/5SHz5/3/
基本上你需要添加这个 CSS，它移除箭头（是 span 元素上的边框）并用一个 gliph 替换它们（参见content: "..."）
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
color: red;
border: none;
font-size: 70px;
text-indent: 0;
margin-top: -32px;
}
.orbit-container .orbit-prev {
background-color: transparent;
}
.orbit-container .orbit-prev span:before {
content: "\2039";
}
.orbit-container .orbit-next {
background-color: transparent;
}
.orbit-container .orbit-next span:before {
content: "\203A";
}
希望这会有所帮助，干杯:)
注意：请注意，如果 stack_on_small 是 true，您的内容将被堆叠并隐藏箭头。我没有调整这种行为，因为对我来说似乎是合乎逻辑的。只需在初始化 Orbit 时禁用此选项即可解决此问题。
【讨论】：
Obrit 带有默认类。您可以自定义类：
<ul data-orbit data-options="next_class: my_next_class; prev_class: my_prev_class;">
...
</ul>
默认类 .next_class 和 .prev_class 具有将文本推出窗口的文本缩进。
如果要替换内容，请使用 css content: 规则。
【讨论】：