jQuery Content Rotator with the Cycle plugin
- Rotator, previous, next, and pause buttons
- text to display current slide of total slides status
Plugin: http://jquery.malsup.com/cycle
<div id="featured-rotator">
<div class="premier-item"></div>
...More divs as slides...
<div class="premier-item"></div>
<div id="featured-rotator-controls">
<span class="button" id="previous"><</span><span class="button" id="pause">||</span><span class="button" id="next">></span> <span id="page-count"></span>
<script type="text/javascript">
$(document).ready(function () {
var premierCount = $("#featured-rotator div.premier-item").length;
var onAfter = function () {
if (currentItem == 0 || currentItem >= premierCount) { currentItem = 1; }
else if (currentItem < 0) { currentItem = premierCount; }
$("div#featured-rotator-controls span#page-count").html(currentItem + " of " + premierCount);
$("#featured-rotator").cycle({
$("div#featured-rotator-controls span#pause").click(function () {
$("#featured-rotator").cycle('toggle');
$("div#featured-rotator-controls span#previous").click(function () {
currentItem = currentItem - 2; //Move our place back 2 spots so moving forward one will put us in the right spot
$("#featured-rotator").cycle('prev');
$("div#featured-rotator-controls span#next").click(function () {
$("#featured-rotator").cycle('next');
div#featured-rotator, div#featured-rotator-controls
font-family:"Trebuchet MS", "Arial", "Verdana", "Sans-Serif";
#featured-rotator-controls
#featured-rotator-controls span.button
#featured-rotator div.premier-item div.premier-item-left, #featured-rotator div.premier-item div.premier-item-right { width:350px; float:left; }
#featured-rotator div.premier-item div.premier-item-right { clear:right; }