轨道幻灯片放映自定义下一个上一个按钮链接左右箭头 [英] orbit slideshow custom next prev buttons links left right arrows

问题描述

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

I am using zurb foundation orbit slideshow. The next and the prev buttons or links on the left and right edge of the page is the default black triangle. Please have a look at this test page:

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

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

How do I customize the next and prev buttons or links? How do I add my own arrow code: ‹ and › OR add my own custom arrow images

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

like these orange left and right arrows here: http://www.getaveo.com/index.aspx

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

Please provide exact code example. I would appreciate it. Thank you very much in advance!

推荐答案

使用轨道，我发现了一个很好的解决方案:通过CSS在.orbit-prev span和.orbit-next span标记上使用:before，您可以修改导航按钮

Working with orbit I found a pretty nice solution: using the :before on the .orbit-prev span and .orbit-next span tag via CSS you can modify the navigation buttons.

我认为您可以在不编辑滑块的js代码的情况下将图像添加为按钮，但是这种解决方案效果很好，显然您可以根据需要对其进行调整

I do not think you can add images as button without editing the js code of the slider, but this solution works nicely, and you can obviously tweak it for your needs

在此处查看jsFiddle: http://jsfiddle.net/endorama/5SHz5/3/

See the jsFiddle here: http://jsfiddle.net/endorama/5SHz5/3/

基本上，您需要添加此CSS，以删除箭头(span元素上的边框)并将其替换为gliph(请参见content: "...")

Basically you need to add this CSS, which remove the arrows ( are borders on the span element ) and replace them with a gliph ( see the 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";
}

希望这会有所帮助，加油:)

Hope this helps, cheers :)

注意:请注意，如果stack_on_small是true，您的内容将被堆叠，箭头被隐藏.我没有调整这种行为，因为对我来说似乎合乎逻辑.只需在初始化Orbit来解决此问题时禁用此选项.

NOTE: Be aware that if stack_on_small is true you content will be stacked and the arrows hidden. I didn't tweak this behaviour because seems logical to me. just disable this option when you initialize Orbit to solve this problem.

这篇关于轨道幻灯片放映自定义下一个上一个按钮链接左右箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！