orbit slideshow custom next prev buttons links left right arrows

Question

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

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!

Answer 1

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.

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

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

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 :)

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.