Search code examples
jquerycyclepager

jQuery.cycle pager divider

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!

Solution

  • 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>&nbsp;/&nbsp; 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>"; 
     }
   }
 });