my code stock.com

Objeto Slider que utiliza jQuery

Snippet options

Download: Download snippet as sah-slider.js.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

/**
 * Sah Slider v1.0
 * Sahib Alejandro Jaramillo Leo
 * http://sahibalejandro.com
 * 
 * This needs jQuery to work.
 * 
 * Licensed under the GNU General Public License (http://www.gnu.org/licenses/gpl.html)
 */
function Sah_Slider(Options)
{
	/*
	 * We need jQuery to make the party begin!
	 */
	if( typeof jQuery == 'undefined' )
	{
		throw 'Sah Slider: ¿Where is jQuery? =(';
		return;
	}
	
	/**********************
	 * PRIVATE PROPERTIES
	 *********************/
	
	this._Options = {};
	this._position = 1;
	this._items_cnt = 0;
	this._timeout_id = null;
	this._on_animating = false;
	this._on_reverse = false;
	
	/* Bind "this" to solve scope conflicts */
	var Sah_Slider = this;
	
	/*
	 * Extend options object
	 */
	this._Options = $.extend({
		item_width: 0,
		speed: 1000,
		timeout: 10000,
		reverse_onend: true,
		auto_slide: true,
		slider_selector: '#slider',
		item_selector: 'li',
		btn_next_selector: '#btn_next',
		btn_prev_selector: '#btn_prev',
	}, Options);
	
	/* count items to know when we are in the last element */
	this._items_cnt = $(this._Options.slider_selector +' '+ this._Options.item_selector).length;
	
	/*
	 * Bind events to "next" and "prev" buttons.
	 */
	$(this._Options.btn_prev_selector).click(function(e){
		e.preventDefault();
		Sah_Slider.prev();
	});
	
	$(this._Options.btn_next_selector).click(function(e){
		e.preventDefault();
		Sah_Slider.next();
	});
		
	/******************
	 * PRIVATE METHODS
	 *****************/
	
	this.autoSlide = function(){
		
		/*
		 * When mode "reverse on finish" mode is ON:
		 * We need determinate the action to move next or move back.
		 */
		if( this._Options.reverse_onend )
		{
			if( this._on_reverse )
			{
				/*
				 * Reverse mode, we move back until
				 * first element, then switch reverse
				 * mode to off.
				 */
				if( this._position > 1 )
					this.prev();
				else
				{
					this._on_reverse = false;
					this.next();
				}
			}
			else
			{
				/*
				 * Reverse mode is off, we move next until
				 * last element, then switch reverse
				 * mode to on.
				 */
				if( this._position < this._items_cnt )
					this.next();
				else
				{
					this._on_reverse = true;
					this.prev();
				}
			}
		}
		else
		{
			/*
			 * When mode "reverse on end" is off, always
			 * move to the "next", if we're on last item
			 * we move back to position one.
			 */
			if( this._position < this._items_cnt )
				this.next();
			else
			{
				this.animatingOn();
				this._position = 1;
				$(this._Options.slider_selector).animate({left:'0px'}, this._Options.speed, this.animatingOff);
			}
		}
	};
	
	/***** END: autoSlide() *****/
	
	this.startTimeout = function()
	{
		if( this._Options.auto_slide )
		{
			/* Bind "this" to solve scope conflicts */
			var Sah_Slider = this;
			
			this._timeout_id = setTimeout( function(){ Sah_Slider.autoSlide(); }, this._Options.timeout);
		}
	};
	
	/***** END: startTimeout() *****/
	
	this.animatingOn = function()
	{
		if( this._Options.auto_slide )
		{
			clearTimeout(this._timeout_id);
		}
		this._on_animating = true;
	};
	
	/***** END: animatingOn() *****/
	
	this.animatingOff = function()
	{
		if( this._Options.auto_slide )
		{
			this.startTimeout();
		}
		this._on_animating = false;
	};
	
	/***** END: animatingOff() *****/
	
	this.prev = function()
	{
		if( this._position > 1 && this._on_animating == false )
		{
			this._position --;
			this.animatingOn();
			
			/* Bind "this" to solve scope conflicts */
			var Sah_Slider = this;
			
			$(this._Options.slider_selector).animate({left:'+=' + this._Options.item_width + 'px'}, this._Options.speed, function(){ Sah_Slider.animatingOff(); });
		}
	};
	
	/***** END: prev() *****/
	
	this.next = function()
	{
		if( this._position < this._items_cnt  && this._on_animating == false )
		{
			this._position ++;
			this.animatingOn();
			
			/* Bind "this" to solve scope conflicts */
			var Sah_Slider = this;
			
			$(this._Options.slider_selector).animate({left:'-=' + this._Options.item_width + 'px'}, this._Options.speed, function(){ Sah_Slider.animatingOff(); });
		}
	};
	
	/***** END: next() *****/
	
	this.goTo = function(position)
	{
		this._position = position;
		this.animatingOn();
		
		/* Bind "this" to solve scope conflicts */
		var Sah_Slider = this;
		
		$(this._Options.slider_selector).animate({left: '-' + (this._Options.item_width * (position-1)) + 'px' }, this._Options.speed, function(){ Sah_Slider.animatingOff(); });
	};
	
	/***** END: goTo() *****/
	
	/*
	 * Let the party begin! =]
	 */
	this.startTimeout();
};

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.