pxslider

slider for learning porpouses

HTML

<div id="home-slider">
        <div><p>image 1</p></div>
        <div><p>image 2</p></div>
        <div><p>image 3</p></div>
        <div><p>image 4</p></div>
        <div><p>image 5</p></div>
        <div><p>image 6</p></div>
	</div>
	<p class="debug">debug:<span></span></p>
    <a href="" class="ext1">go to first slide( how to? )</a><br>
    <a href="" class="ext2">go to slide 2( how to? )</a><br>
    <a href="" class="ext3">go to last slide( how to? )</a><br>
    <br> 
    <a href="" class="ext4">Trigger click</a>

CSS

.clear { clear: both; }
		body { margin: 100px auto; width: 400px; }
		* { border: 0; padding: 0; list-style: none; }

		.px-slider-container {
			margin:0 auto;		
			overflow:hidden; 
			position:relative;
            background: #FBFBFB;
		}
#home-slider p { text-align: center; padding: 20px; }

		/**
		* Navigation
		*/
		.px-control {
			display:block;
			position:absolute;
			z-index: 200;
			background: #FFF;		
		}
		#px-left {
			top:10px;
			left:0;
		}
		#px-right {
			top:10px;
			right:0;
		}
		#px-left.disabled, 
		#px-right.disabled { 
			cursor: default;
			color: #CCC;
			text-decoration: none;
		}

		/**
		* Pager 
		*/
		.px-thumbs { }
		.px-thumb-box a { text-decoration: none; color: #000000; font-size: 14px; float: left; margin-right: 10px; }
		.px-thumb-box a.current { background: #353535; font-size: 18px; color: #FAFAFA; }

JavaScript

/* PLUGIN START */
(function($){
	
	$.fn.pxslider = function( options ) {
		
		var defaults = {  
			slideWidth: 730,
			speed: 500,	
			transition: 'slide',			
			onSlideBefore: function() {},
			onSlideAfter: function() {}
		};  

		options = $.extend(defaults, options);
		this.each(function(){
		
			
			var slider = $(this),							//slide object

				currentPosition = 0,						//current position of the slideshow

				numberOfSlides = slider.children().size();	//number of slides
			
			slider.wrapAll('<div class="px-slider-container"></div>'); 	//add a surrounding div to slider
			
			slider.parent().css({ 'width': options.slideWidth  });		//set surrounding div width
			
			slider.parent()												//add controls to surrounding div
				.prepend('<a href="#" class="px-control" id="px-left">prev</a>')
				.append('<a href="#" class="px-control" id="px-right">next</a>')
				.append('<div class="px-thumbs"></div>');

			slider.children().each(function(){
			
				var i = $(this).index();
				
				$('.px-thumbs', slider.parent() ).append('<div class="px-thumb-box" data-id="'+ i +'"><a href="#" data-id="'+i+'">'+i+'</a></div>');
			
			});

			slider.css({'width': options.slideWidth * numberOfSlides, 'position':'relative' });				// set slider width
		
			slider.children().css({'float': 'left','position': 'relative', 'width': options.slideWidth });	//set slides width

			setNavigation(currentPosition);

			//slide navigation controls prev/next
			$('.px-control', slider.parent() ).bind('click', function(){
				if( currentPosition >= 0 && currentPosition < numberOfSlides){

					var newposition = ($(this).attr('id')=='px-right') ? currentPosition+1 : currentPosition-1;

					gotoslide( newposition );

				}
				
				return false;

			});

	 		//pager navigation
	 		$('.px-thumb-box a',slider.parent() ).click( function(e){
				
				gotoslide( $(this).data('id') );

				e.preventDefault();

			});

			slider.parent().keydown(function(e) {

				var code = (e.keyCode ?...