Change Jquery Cycle plugin code (move Pager position)

Change Jquery Cycle plugin code (move Pager position)

I have this:

  1. <script type="text/javascript">
    $(function() {
    $('#slideshow').after('

    <div id="slideshow-nav">').cycle({
        fx:       'fade',
        timeout:   0,
        prev: '#prev',
        next: '#next',
        fit:1,
        pager:      '#slideshow-prevnext',
        pagerAnchorBuilder: function(idx, slide) {
        return '







    <a class="dot" href="#">&nbsp;</a>';
            }
    });
    });



And it makes HTML markup like this:

  1.  <div id="slideshow-prevnext" class="slideshow-prevnext"> 
       
    <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a>
       
    <a id="next" class="right" href="#"><span class="invisible">Next</span></a>
       
    <a href="#" class="dot">&nbsp;</a>
       
    <a href="#" class="dot">&nbsp;</a>
       
    <a href="#" class="dot">&nbsp;</a>
    </div>

How can I change Cycle option so that it can move the three "dot" class before "Prev" and "Next"? Such as:

  1.  <div id="slideshow-prevnext" class="slideshow-prevnext"> 
       
    <a href="#" class="dot">&nbsp;</a>
       
    <a href="#" class="dot">&nbsp;</a>
       
    <a href="#" class="dot">&nbsp;</a>
       
    <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a>
       
    <a id="next" class="right" href="#"><span class="invisible">Next</span></a>
    </div>

Thank you,