How to override auto-generated html in foundation's orbit?

Question

I'm using the excellent Foundation, but I don't want the 'Prev' and 'Next' buttons on the Orbit slider.

In my application.js file I've set the following:

$(document).foundation('orbit', {
  next_class: false,
  prev_class: false,
});

This only partially works though, as the html auto-generated by orbit still provides anchor text to back-up the image, which says 'Next' and 'Prev' and they now display as words underneath the slider.

For such a small thing I don't want to completely abandon the zurb-foundation gem and manually download and add all the files (which also means losing out on updates as they take place) but can anyone think how to get rid of auto-generated html when it's ghosted in by the javascript?

You can read the document here .

ps I also tried turning stack_on_small: true, to false because that where the 'next' and 'prev' html elements are nested under, but that screws the whole slider up.

Thanks for any help/suggestions of how I could hack this!

Answer 1

If you go into the jquery.foundation.orbit.js, there is a line of JS that looks like this:

directionalNavHTML: '<div class="slider-nav hide-for-small"><span class="right"></span>    <span class="left"></span></div>',

and you can remove everything to do with directionalNav.

If you don't want to mess with the JS, you can set the following CSS:

.orbit-wrapper .slider-nav span {
    display:none;
}

Saw your comment below. If you want to remove text as well, there is a line in the JS for that also:

  directionalNavRightText: 'Right',
  directionalNavLeftText: 'Left', 

It's there for accessibility purposes, but it's easy to remove.

Answer 2

Use $("div.slider-nav").css({display:"none"}); in front of your code to remove the nav buttons.

Check this SO Post .