zurb foundation - orbit slideshow custom next prev buttons links left right arrows -

I'm using the zurb foundation class slideshow. The next and previous button or link on the left and right edge of the page is the default black triangle. Please take a look at this test page:

How do I optimize the next and previous buttons or links? How do I add my own arrow code? Add your own custom arrow images

Here are the orange left and right arrows:

Please give the exact code example. I would appreciate it. Thanks so much in advance!

Working with orbit I found a very good solution: : before You can modify navigation buttons via .orbit-prev span and .orbit-next span tags.

I do not think you can add images in the form of buttons without editing the JS Code of the slider, but this solution works well, and you clearly see it for your needs.

See jsFiddle here:

Actually you need to add this CSS, which draws the arrows (there are limitations on the Span element) and they have a glyph (< Code> content view: "..." )

  .orbit-container. Orbit-pre span, .orbit-container Orbit-next span {color: red; Border: None; Font-size: 70px; Text indent: 0; Margin-top: -32 pixels; } .orbit-container .orbit-prev {background-color: transparent; } .orbit-container .orbit-prev span: first {content: "\ 2039"; } .orbit-container Orbit-next {background-color: transparent; } .orbit-container Orbit-next span: First {content: "\ 203A"; }   
 Hope this helps, Cheers :)  
  Note : Keep in mind that if  stack_on_small   true  your content will be stacked and hide arrows. I did not do much of this behavior because I find it logical to just disable this option while doing orbit to solve this object.