jQuery Cycle plugin pager errors

Question

I am attempting a single input of jquery Cycle to control 4 different cycles across the website. They have all got different ID tags, however, the pager control div appears 4 times. Here is my jquery:

$('#homeslide, #hairslide, #panamaslide, #chawtonsslide') 
.cycle({ 
fx: 'fade', 
speed: '1000', 
timeout: '8000', 
next: '#next',
prev: '#prev',
cleartypeNoBg: 'true',
pager: '#controls'
});

HTML:

<div id="banner-container">
    <div id="prev"></div>
    <div id="next"></div>
    <div id="controls"></div>
    <div id="homeslide">
        <img src="template/banner1.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="hairslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="panamaslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
    <div id="chawtonsslide">
        <img src="template/banner2.jpg" alt="Banner Image 1" />
        <img src="template/banner2.jpg" alt="Banner Image 2" />
        <img src="template/banner3.jpg" alt="Banner Image 3" />
        <img src="template/banner4.jpg" alt="Banner Image 4" />
        <img src="template/banner5.jpg" alt="Banner Image 5" />
        <img src="template/banner6.jpg" alt="Banner Image 6" />
        <img src="template/banner7.jpg" alt="Banner Image 7" />
    </div>
</div>

It works, apart from showing 4 pager divs. I was going to try a $.each count but as they all need IDs i dont think i can do that. Its worth noting that these different blocks of images are controlled via our CMS and only certain ones are shown per page. Example: home.htm shows #homeslide only

Thanks guys

Answer 1

$('#homeslide') 
    .cycle({ 
    fx: 'scrollVert', 
    speed: '1000', 
    timeout: '8000', 
    pager: '#pager',
    pagerAnchorBuilder: function(i) {
            return '<a href="#"></a>';
    },
    next: '#next',
    prev: '#prev',
    cleartypeNoBg: 'true'
});

$('#hairslide') // can add other divs here that require to use the same pager
    .cycle({ 
    fx: 'fade', 
    speed: '1000', 
    timeout: '8000',
    next: '#next',
    prev: '#prev',
    pager: '#pager',
    pagerAnchorBuilder: function(i) {
            return $('#pager a:eq('+i+')');
    },
    cleartypeNoBg: 'true',
});