how we can have SlidesJS's Pager to JQuery Cycle

Question

I was trying to design a pager system for my JQuery Cycle. Fortunately, i got this one from JQuery Cycle: http://www.malsup.com/jquery/cycle/div.html

Now I would like to have a pager system that looks like http://slidesjs.com/

Can i add SlideJS Pager system into a JQuery Cycle?? If yes, how?

Answer 1

It would probably be difficult to "integrate" the plugins however you can easily build the page anchors with css that shows little circles (or use a sprite like slidejs) and is almost identical.

I've created a demo:

http://jsfiddle.net/lucuma/Mf7Rv/2/

First, setup a container for the entire package.

<div id="sliders">
   <div id="slideshow">
      <!-- your slides go here whether divs or imgs -->
   </div>
   <div id="pager">
      <!-- this gets dynamically generated by the plugin's paginate that we'll return a's -->
   </div>
   <div id="controller">
     <a href="#" class="prev">&lt;</a>  <!-- these could be images as well -->
     <a href="#" class="next">&gt;</a>
   </div>
</div>

Next style the pager and prev/next with something like this:

#pager {display:inline-block;float:right}
#pager a {background:#FFF;border:2px solid #333;display:inline-block;
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:10px; height:10px; margin-left:2px;
}
#pager a.activeSlide {background-color:#333333;border-color:#333333}
#pager a:hover{background-color:#97201c;border-color:#97201c}
#controller a {text-decoration:none;color:#333333}
#controller a.hover {text-decoration:none;color:#97201c}

And Finally load up jquery cycle:

function paginate(idx, slide) {
  return "<a href='#'></a>"   ;
}
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager',
                  pagerAnchorBuilder: paginate,
                   prev: $('.prev'),
                   next: $('.next')
                  });​