Pastable version of Element Slider for Prototype.js

<pre class='prettyprint' language='javascript'>// the HTML for that'd use it
// 
// &lt;div id=&quot;x_container&quot;&gt;
//  &lt;a id=&quot;x_back_button&quot;&gt;&lt;img src=&quot;/images/left-arrow.png&quot; /&gt;&lt;/a&gt;
//  &lt;a id=&quot;x_forward_button&quot;&gt;&lt;img src=&quot;/images/right-arrow.png&quot; /&gt;&lt;/a&gt;
//
//  &lt;div class=&quot;x_widget&quot;&gt;
//    &lt;p&gt;content...1&lt;/p&gt;
//  &lt;/div&gt;
//
//  &lt;div class=&quot;x_widget&quot; style=&quot;display:none;&quot;&gt;
//    &lt;p&gt;content...2&lt;/p&gt;
//  &lt;/div&gt;
//
//  &lt;div class=&quot;x_widget&quot; style=&quot;display:none;&quot;&gt;
//    &lt;p&gt;content...3&lt;/p&gt;
//  &lt;/div&gt;
// &lt;/div&gt;
//
// &lt;script type=&quot;text/javascript&quot;&gt;
//   new ElementSlider( 'x_container', '.x_widget', 'x_back_button', 'x_forward_button' );
// &lt;/script&gt;

var ElementSlider = Class.create();

ElementSlider.prototype = {
  initialize: function( container_element, item_element, back_button_element, forward_button_element ) {
   	this.container_element = container_element;

this.items = $( this.container_element ).select( item_element ).toArray();

this.back_button_element = back_button_element;
  	this.forward_button_element = forward_button_element;

this.current_item_index = 0;

this.observeBackButton();
  	this.observeForwardButton();
  },

observeBackButton: function() {
  	Event.observe( this.back_button_element, 'click', this.moveBack.bindAsEventListener(this), false );
  },
	
  observeForwardButton: function() {
  	Event.observe( this.forward_button_element, 'click', this.moveForward.bindAsEventListener(this), false );
  },

moveForward: function() {
    if ( this.items[this.current_item_index] == this.items.last() ) {
      this.current_item_index = 0;
    } else {
      this.current_item_index += 1;      
    }
    this.resetItems();
  },
  
  moveBack: function() {
    // if first, set to last
    if ( this.items[this.current_item_index] == this.items.first() ) {
      this.current_item_index = ( this.items.size() - 1 );
    } else {
      this.current_item_index = ( this.current_item_index - 1 );      
    }
    this.resetItems();    
  },
  
  resetItems: function() {
    this.items.each( function( item ) { $( item ).hide(); })
    this.items[this.current_item_index].show();
  }
}</pre>
<a href="http://www.refactormycode.com/codes/730-element-slider-for-prototype-js" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://www.refactormycode.com/images/small_logo.gif" style="border:0" /></a>

Refactor :my => 'code'

Recent

Popular

Pastable version of Element Slider for Prototype.js