轨道幻灯片放映自定义下一个上一页按钮链接左右箭头

Question

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

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

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

就像这里的橙色左右箭头： http ： //www.getaveo.com/index.aspx

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

Answer 1

使用轨道，我发现了一个很好的解决方案：通过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来解决此问题时禁用此选项。

Answer 2

我亲爱的朋友！ 请为您遇到ORBIT的麻烦找到完整的解决方案。 导航箭头时，需要5分钟才能制作自定义按钮（图像或人字形或字体“ Font Awesome”）。

在您的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>

而已！ 如果喜欢的话给我排名！

Answer 3

我成功地获得了stacey.mosier的答案，并且能够使用CSS content属性将箭头更改为图像 。 使用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，并且您使用上一个箭头路径而不是下一个箭头路径）

方法＃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：规则。

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' />" );

将图像URL替换为您自己图像的URL，以及您自己图像的高度/宽度的高度/宽度。 要使用字体图标，我将执行以下操作：

$( "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; }