#content rotator

Requirements

- Rotator, previous, next, and pause buttons

- text to display current slide of total slides status

Solution

Plugin: http://jquery.malsup.com/cycle

Html:

<div id="featured-rotator">

    <div class="premier-item"></div>

    ...More divs as slides...

    <div class="premier-item"></div>

</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>

</div>

Script:

<script type="text/javascript">

    $(document).ready(function () {

        var premierCount = $("#featured-rotator div.premier-item").length;

        var currentItem = 0;

        var onAfter = function () {

            if (currentItem == 0 || currentItem >= premierCount) { currentItem = 1; }

            else if (currentItem < 0) { currentItem = premierCount; }

            else { currentItem++; }

            $("div#featured-rotator-controls span#page-count").html(currentItem + " of " + premierCount);

        };

        $("#featured-rotator").cycle({

            fx: 'scrollLeft',

            timeout: 5000,

            after: onAfter

        });

        $("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');

        });

    });

</script>

Styles:

div#featured-rotator, div#featured-rotator-controls

{

    width:700px;

    background-color:beige;

    font-family:"Trebuchet MS", "Arial", "Verdana", "Sans-Serif";    

    font-size:10px;    

    color:#666;

}

#featured-rotator div

{

    vertical-align:top;    

}

#featured-rotator h2

{

    margin:10px 0 15px 0;

    color:#339;

    font-size:24px;

}

#featured-rotator a

{

    text-decoration:none;

    color:#339;

}

#featured-rotator-controls

{

    line-height:24px;

}

#featured-rotator-controls span.button

{

    cursor:pointer;

    padding:2px 5px;

    margin-right:3px;

    background-color:#666;

    color:#fff;

}

#featured-rotator div.premier-item div.premier-item-left, #featured-rotator div.premier-item div.premier-item-right { width:350px; float:left; }