Sometimes, We Write Stuff...

Just FYI, interferes with Ruby on Rails default scriptaculous library. Although works well without any built in rails functions.

I see that you have options for prev and next buttons, but not referenced in code - are you planning to update the changeIt function to allow prev/next?

I appear to have solved my non-moving element problem (IE 7) with the slider when it's inserted inside of another div. If I declare widths for each item class element (h1, h3, p, etc.), all the elements seem to move. CSS problem, after all!

Here are some updates to make this class work with forward/back navigation, as well as being able to pass in the text for forward/back/pause/play on the fly. This will also work to use images as the nav.

Add these to your options:

playBtnText: null,          //text/html tags to show up for 'play'
pauseBtnText: null,         //text/html tags to show up for 'pause'
prevBtnText: null,          //text/html tags to show up for 'previous'
nextBtnText: null           //text/html tags to show up for 'next'

During initialization you need to add click event handlers for previous and next. This also sets the 'text' for the buttons (I'm using icons/graphics). Here's the new initialization:

initialize: function(options) {
    //set options
    this.setOptions(options);

    //remove any scrollbar(s) on the container
    this.options.container.setStyle('overflow', "hidden");  

    //if there is a play/pause button, set up functionality for it
    if(this.options.hasControls != false) {
        this.pauseIt.bind(this);  
        this.options.playBtn.setHTML(this.options.pauseBtnText);
        this.options.prevBtn.setHTML(this.options.prevBtnText);
        this.options.nextBtn.setHTML(this.options.nextBtnText);
        this.options.prevBtn.addEvents({
            'click':    function() {
                var move_to = this.options.itemNum-1;
                if(move&#95;to < 0) {
                    move&#95;to = this.options.items.length-1;
                }
                this.pauseIt();
                this.slideIt(move&#95;to);
            }.bind(this),
            'mouseenter' : function() {
                this.setStyle('cursor', 'pointer');
            }
        });
        this.options.nextBtn.addEvents({
            'click':    function() {
                this.pauseIt();
                this.slideIt();
            }.bind(this),
            'mouseenter' : function() {
                this.setStyle('cursor', 'pointer');
            }
        });
        this.options.playBtn.addEvents({
            'click':    function() {
                this.pauseIt();
            }.bind(this),               
            'mouseenter' : function() {
                this.setStyle('cursor', 'pointer');
            }
        });
        this.options.playBtn.addEvent('mouseenter', function() {this.setStyle('cursor', 'pointer');} );
    }

    //setup items (a.k.a. slides) from list
    this.options.items.each(function(el, i){
          //f.y.i.  el = the element, i = the index

          //positioning/opacity setup
          el.setStyle('position', "absolute");

          //get size of item and move that far above the container
          var itemH = el.getSize().y;
          var itemW = el.getSize().x;
         //el.setStyle('top', (-1 * itemH));
          el.setStyle('left', (-1 * itemW));

        // -- Number nav setup
        if(this.options.numNavActive){
            //create numbered navigation boxes, and insert into the 'num&#95;nav' ul)
            var numItem = new Element('li', {id: 'num'+i});
            var numLink = new Element('a', {
                'class': 'numbtn',
                'html': (i+1)
            });

            numItem.adopt(numLink);
            this.options.numNavHolder.adopt(numItem);
            this.numNav.push(numLink);

            numLink.set('morph', {duration: 100, transition: Fx.Transitions.linear, link: 'ignore'});

            numLink.addEvents({
                'click' : this.numPress.bindWithEvent(this, i),
                'mouseenter' : function() {
                    this.setStyle('cursor', 'pointer');
                }
            });

            //set initial number to active state
            if(i == this.options.itemNum){
                var initNum = this.numNav;
                initNum.addClass('active');
            }

        }
        //end if num nav 'active'
     }, this);

},

pauseIt: function () {
    //only move if not currently moving
    if(this.isSliding == 0){
        if(this.options.isPaused == 0){
            this.options.isPaused = 1;
            $clear(this.theTimer);
            this.options.playBtn.setHTML(this.options.playBtnText);
        }
        else{
            this.options.isPaused = 0;
            this.slideIt();
            this.theTimer = this.slideIt.periodical(this.options.slideTimer, this, null); 
            this.options.playBtn.setHTML(this.options.pauseBtnText);
        }
    } //end if not sliding
},