orbit slideshow custom next prev buttons links lef

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

Obrit comes with default classes. You can customize the classes:

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

The default classes .next_class and .prev_class have a text-indent that is pushing the text out of the window.

If you are wanting to replace the content, use the css content: rule.

Answer 2

I think this is a little more straightforward:

For Foundation 5 - this is your 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' />" );

Replace the image URL with the URL of your own image, and the height/width of your own image height/width. To use a font icon, I would do something like this:

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

You'll need to overwrite the default css styles too to use images:

.orbit-container .orbit-prev, .orbit-container .orbit-next {
text-indent: 0px !important;
line-height: 78px;
height: 78px;
width: 68px;

}

Keep the text indent at 0, and use your own heights/widths. For an icon font, I didn't try it but I think you should be able to use the existing CSS with no problem.

You'll probably want to remove the hover state as well, but maybe not:

.orbit-container .orbit-prev:hover, .orbit-container .orbit-next:hover {
      background-color: transparent; }

Answer 3

My Dear friends! Please find complete solution for your troubles of ORBIT. It takes 5 min to make custom buttons(image or chevron or font-"Font Awesome") as you navigation arrows.

In your 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)
});

In your css:

.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
.next-slide {/* PUT YOUR STyLES HERE*/}
.prev-slide {/* PUT YOUR STyLES HERE*/}

If you are using font awesom:

same js as above

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>

Thats it! Rank me if you like it!

Answer 4

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.

Answer 5

I had success with stacey.mosier's answer and was able to change my arrows to an image using the CSS content property. Using Foundation v5.2.2

Approach #1

This is what working code for a single class looks like:

.orbit-next  {
   content: url("Homepage/Homepage_Banner_Arrow_Next_on_retina.png");
   width: 16px !important;
   height: 62px !important;
   margin-right: 20px;
}

I set the width and height of the .orbit-next class to be equal to that of the image I'm adding.

And for the hover styling:

.orbit-container .orbit-next:hover  {
   content: url("Homepage/Homepage_Banner_Arrow_Next_off_retina.png";
   background-color: transparent; //so there's no background effect

For .orbit-previous the rules are basically the same as above (except margin-right becomes margin-left and you use the prev arrow path instead of the next)

Approach #2

To stay DRY I instead implemented a "multiple selector" and now only need one arrow asset by rotating the current one via css transform

.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  
}   

I anticipate the need to scale/hide the size of the arrows based on the column width currently active, something to consider, but beyond the scope of this question. Hope this helped!