jQuery Cycle Plugin is a very popular "slider" widget that's been around for many years. So long, in fact, that many of my old apps use it. Like, they're pretty old now. In those old days, I used jQuery UI for styling and while that had it's challenges, it was easy to make the pager controls take on the themed "button" look:
jquery-cycle-jquery-ui-styling
<script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... ,pager: '#pager' ,activePagerClass: "ui-state-highlight" }); $("#pager a").addClass("ui-button ui-state-default"); }); </script> The ease of this, as you can see is that you simply have to setup all the link items that the cycle plugin builds in the pager div as "ui-button" and "ui-state-default" and then specify the active class for each one to be "ui-state-highlight". An important thing to note is that structurally, the pager is just a bunch of anchor tags inside a div. That is as simple a structure as you can cook up. The pager div just starts out like this: <div id="pager"></div> For Bootstrap, the Pagination Widget is sweet, but requires a (better) more structured DOM - the link items have to be constructed using <li>'s; That's not how jquery Cycle works, by default, but that's easy enough to configure with the option (callback) pagerAnchorBuilder:
jquery-cycle-bootstrap-styling-1
<script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... ,pager: '#pager' ,activePagerClass: "active" ,pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#">'+(idx+1)+'</a></li>'; } }); }); </script> So here, we're "manually" constructing each pager item to take on the structure of an anchor tag inside of a list item. With this, we setup the pager with a little more structure: <div class="pagination pagination-small"> <ul id="pager"></ul> </div> So far, so good. But here is the tricky part. We want to now use the bootstrap styles to make the "active" slide in the pager look, well, active (like we used "ui-state-highlight" in the jQuery UI example). That's a little harder to do. as you can see from the above code & screenshot, just setting the activePagerClass option isn't enough. The reason why this doesn't work is because the cycle plugin will apply that style to the anchor tag, not the <li> tag. With Bootstrap's Pagination widget, we need to apply it to the <li>. {Enter Sandman Music} Checkout the option listed (1) up from the bottom on the jQuery Cycle options reference page. The updateActivePagerLink callback allows us to tweak how the class is applied, just like we were able to tweak how the pager link was built using the pageAnchorBuilder. The result?
jquery-cycle-bootstrap-styling-2
<script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... ,pager: '#pager' ,pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#">'+(idx+1)+'</a></li>'; } ,updateActivePagerLink: function(pager, idx){ $(pager).find('li').removeClass('active').filter('li:eq('+idx+')').addClass('active'); } }); }); </script>