Question

Am having a problem getting my pager to look right with jquery cycle.
The following code

$(document).ready(function() {
    $('#slider_container')
    .after('<div id="pager">')
    .cycle({
    fx: 'scrollRight',
    speedIn: 400,
    speedOut: 200,
    timeout: 10000,
    pause: 1,
    delay: -4000,
    easeIn:  'easeInCirc',
    sync: false,
    pager: '#pager',
    pagerAnchorBuilder: function(idx, el) {
        return '<li><a href="#"><img src="images/grey_dot.png" width="10" height="10" /></a></li>';
        }
    });
});

Has got me the images to show up as the navigation instead of the numbers but the problem is that I would like to be able to have a different coloured circle for the active slide.

I tried leaving the img bit out of the pageAnchorBuilder and using backgrounf:(url) in the CSS and a different one on .activeSlide but to no avail.

Would appreciate anyone’s help, thanks.

Answer 1

I know you said you have already tried to style them via css and it didnt work? But in theorie it should work. I think you should try again.

Sample:

#pager a{
    display:block;
    background:url(pagerBg.png) no-repeat;
}
#pager a.activeSlide{
    background:url(activePagerBg.png) no-repeat;
}

This works on my localhost. Ideally you can use the page anchor builder to hide the numbers:

pagerAnchorBuilder: function(idx, el) {
    return '<a href="#"></a>';
    }

I hope this helps!

EDIT:

First of all. Here is a demo on how it should work: http://jsfiddle.net/Lywtt/1/

Now, you should try following:

-remove the anchor builder completly

Once you remove the anchorbuilder you do see simple links with the number of slides, right? Like “123”

-Next thing we want to do is to style this links, so add the following in your css:

#pager{
    width:200px;
    margin-top:5px;
    border:1px solid blue;
    text-align:center;
}
#pager a{
    display:inline-block;
    width:20px;
    margin-left:5px;
    background:green;
}
#pager a.activeSlide{
    background:yellow;
}

Obviously, most of the styles above are just for demo purpose and can be removed once everything works as you wish.

This must work in theory, however if it still doesnt work, than relink your updated site (without the anchor builder and with the new styles) and we can check it again.

Edit 2:

Good to hear it works! Now using images instead of the green and yellow (for active slides) blocks, is quite easy. Lets start with a demo again: http://jsfiddle.net/Lywtt/2/

What we need to do is following:

Simply replace the css with something like this:

#pager a{
    display:inline-block;
    width: 20px; /* width of the image */
    height: 20px; /* height of the image */
    margin-right:5px; /* space between the images */
    background:url(pagerBg.png) no-repeat;
}
#pager a:last-child{
    margin-right:0; /* we need no space after the last pager link */
}
#pager a.activeSlide{
    background:url(activePagerBg.png) no-repeat;
}

As you can see, we simply replace background:green; and background:yellow; with the corresponding images. Of course you will have to adjust the links of the images to match your site structure.

You should now see the numbers with the images as background instead of green and yellow backgrounds.

As a final step, we want to remove this numbers. To do so, we have to insert a simple anchorBuilder in our script again:

pagerAnchorBuilder: function(idx, el) {
    return '<a href="#" title="Slides"></a>';
    }

You see we insert a simple anchorBuilder to display empty links (no numbers).

Now you should be able to see the images only without numbers.

If i didnt make a typo or another mistake, everything should work fine now. If not, dont hesitate to say so!

Regards!