Custom bullet style navigation

[neoneddy]

trafficstars

I'm looking to do a custom pager or navigation.

https://github.com/zurb/orbit/issues/47 I used this to build a custom pager, and this works, but I'm not sure how to give active states as the slideshow runs.

    $('.orbit-bullets-labels li').click(function(){
    var slideID;
 slideID = $(this).index();
 $('.orbit-home').trigger('orbit.goto', slideID); 
 $('.orbit-bullets-labels li').removeClass('active');
 $(this).addClass('active');     
   }); 

I had also thought of replacing the LI content of the default bullets with jQuery, but it's a bit out of my league. Yes I could do it hard coded or using background images in CSS with :nth selectors but I want to do this right.

http://grab.by/dkn6 This is the design / usecase I need to implement.

[karlbellagio]

I am not sure if you got an answer, but I think you are just thinking too much with creating your own bullet functions. The easiest way is to add classes to each list item and swap them out with a class call. I got this to work fine.

Javascript

$(window).load(function() {
$("ul.orbit-bullets li").attr("class", function(i) {
  return "slides" + (i+1);
});
 });

and your CSS class markers would be

/* Active class */
.slide1.active {
/* the css */
}

Hope that helps!

[Jsewill]

Here's another solution (only the jquery, assuming you have the style and markup in place):

$('.orbit-home').ready(function() {

    //Orbit call
    $('.orbit-container-selector').orbit({
        /* Orbit options here */
        afterSlideChange: function(){

            //Manual call for custom bullets
            this.$element.parents('.orbit-wrapper').next('.orbit-bullets').find('li').removeClass('active').eq(this.activeSlide).addClass('active');
        }
    });

    //Set first bullet's class to active
    $('.orbit-container-selector').parents('.orbit-wrapper').next('.orbit-bullets').find('li:first').addClass('active');
});