jQuery.cycle pager divider

Question

this is my first post here, I hope I won't make to many mistakes...

I use the wonderful jquery.cycle plugin for a news slider module on my website. Now I would like to add a pager that looks like this:

01 / 02 / 03 / 04

That means I have to add "dividers" (= "/" a forward slash) after each pager number except the last one. But I can't figure out how i could possibly do that.

This is what I have:

// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager)
        .find('a')
        .removeClass('active') 
        .filter('a:eq('+currSlideIndex+')')
        .addClass('active'); 
};



$('div.teaser-news')
    .after('<div class="pager-news"></div>')
    .cycle({ 
        fx:     'scrollRight',
        rev:        1,
        speed:  'slow', 
        timeout: 6000,
        pager:'.pager-news', 
        pagerAnchorBuilder: function(idx, slide) {

            var numSlides = $("div.teaser-news").length;

            if( idx < 10){
                idx += '<a href="#">0' + idx + '</a><span class="divider">&nbsp;&#47;&nbsp;</span>';
            } else {
                idx += '<a href="#">' + idx + '</a><span class="divider">&nbsp;&#47;&nbsp;</span>';
            }

            return idx; 
        }
});

Can anybody help me get rid of the last slash? Thanks!

Please mark one of the answers below by clicking the green arrow if it helped you. — lucuma, May 17 '12 at 22:44

score 0 · Answer 1 · answered May 05 '12 at 11:30

if( idx < 10){
   idx += '<a href="#">0' + idx + '</a>';
   if (idx+1 != numSlides) {
      idx += '<span class="divider">&nbsp;&#47;&nbsp;</span>';
   }
} else {
   idx += '<a href="#">' + idx + '</a>';
   if (idx+1 != numSlides) {
      idx += '<span class="divider">&nbsp;&#47;&nbsp;</span>';
   }
}

IMHO

score 0 · Answer 2 · edited May 23 '17 at 11:48

I'd prefer to just use a pad function:

function zeroPad(num, places) {
  var zero = places - num.toString().length + 1;
  return Array(+(zero > 0 && zero)).join("0") + num;
}

and then you can remove the if/then and just do:

var slash = "/";
if (idx=(numSlides-1))
    slash = "";

return zeroPad(idx+slash, 2);

There are several more examples How to output integers with leading zeros in JavaScript

score 0 · Accepted Answer · answered Apr 07 '13 at 12:31

The zero pad function added by lucuma came in handy with mine, although after a bit of experimentation i found that the output didn't like adding outside the wrapper. So when i tried to do return <a href='#'>" + zeroPad(n,2) + "</a> /  it ignored the markup after the closing </a>

To get round this i had to add a wrapping <li> so i could then add the forward slash inside the wrapper. I have amended my code to match

$('.carousel .images').cycle({
   timeout: 5000,
   pager : '.pager-news',
   pagerAnchorBuilder: function(idx, slide) {
     var n = idx+1;
     var wrapper = $("div.teaser-news");
     if(n != wrapper.children().length){
       return "<li><a href='#'>" + zeroPad(n,2) + "</a>&nbsp;/&nbsp;</li>";  
     }else{
       return "<li><a href='#'>" + zeroPad(n,2) + "</a></li>"; 
     }
   }
 });

jQuery.cycle pager divider

3 Answers3