如果您使用字体awesom：

Question

我正在使用zurb基础轨道幻灯片。页面左右边缘的下一个和上一个按钮或链接是默认的黑色三角形。请看一下这个测试页面：

http://www.endsnore.com/_test1b/index.aspx

如何自定义下一个和上一个按钮或链接？如何添加自己的箭头代码：<和>或添加我自己的自定义箭头图像

像这些橙色左右箭头一样： http://www.getaveo.com/index.aspx

请提供确切的代码示例。我会很感激。非常感谢你提前！

Answer 1

使用轨道我找到了一个非常好的解决方案：通过CSS使用:before和.orbit-prev span标签上的.orbit-next span，您可以修改导航按钮。

我不认为你可以在不编辑滑块的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时禁用此选项即可解决此问题。

Answer 2

亲爱的朋友们！请找到完整的解决方案，以解决您的ORBIT问题。导航箭头需要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*/}

如果您使用字体awesom：

与上述相同的

<强>的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>

多数民众赞成！如果你愿意，请给我排名！

Answer 3

我使用stacey.mosier的答案取得了成功，并且能够使用 CSS内容属性 将我的箭头更改为图像。 使用Foundation v5.2.2

方法＃1

这就是单一类的工作代码：

.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箭头路径而不是下一个）

方法＃2

保持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  
}

我预计需要根据当前活动的列宽来缩放/隐藏箭头的大小，需要考虑，但超出了本问题的范围。希望这有帮助！

Answer 4

Obrit附带默认课程。您可以自定义类：

<ul data-orbit data-options="next_class: my_next_class; prev_class: my_prev_class;">
  ...
</ul>

默认类.next_class和.prev_class有一个文本缩进，用于将文本推出窗口。

如果您想要替换内容，请使用css content：rule。

Answer 5

我认为这有点简单：

对于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; }

轨道幻灯片定制下一个prev按钮链接左右箭头

5 个答案:

如果您使用字体awesom：

方法＃1

方法＃2