1

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

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

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

喜欢这里的橙色左右箭头：http: //www.getaveo.com/index.aspx

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

4

5 回答 5

5

使用 orbit 我发现了一个非常好的解决方案：通过 CSS 使用:beforeand.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 时禁用此选项即可解决此问题。

于 2013-09-17T12:41:06.590 回答
4

我亲爱的朋友！请为您的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>

而已！喜欢就给我点个赞吧！

于 2013-10-01T14:09:41.173 回答
3

我在 stacey.mosier 的回答中取得了成功，并且能够使用CSS content property将我的箭头更改为图像。 使用 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

为了保持干燥，我实施了一个“多重选择器”，现在只需要一个箭头资源，通过 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  
}

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

于 2014-04-15T22:42:42.990 回答
1

我认为这更简单一点：

对于 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; }
于 2014-03-13T23:03:30.723 回答
1

Obrit 带有默认类。您可以自定义类：

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

默认类 .next_class 和 .prev_class 具有将文本推出窗口的文本缩进。

如果要替换内容，请使用 css content: 规则。

于 2013-06-23T21:44:56.397 回答