HELP with Easy Slider(not so easy) please!!!

Discussion in 'jQuery' started by mrpixel, Nov 16, 2012.

  1. #1
    Hello,
    I'm using Easy Slider, and i want the slider start the second slide. Below is the slider jQuery code. Could you please be nice and help me with this

    
     
    /*
     *	markup example for $("#slider").easySlider();
     *	
     * 	<div id="slider">
     *		<ul>
     *			<li><img src="images/01.jpg" alt="" /></li>
     *			<li><img src="images/02.jpg" alt="" /></li>
     *			<li><img src="images/03.jpg" alt="" /></li>
     *			<li><img src="images/04.jpg" alt="" /></li>
     *			<li><img src="images/05.jpg" alt="" /></li>
     *		</ul>
     *	</div>
     *
     */
    
    (function($) {
    
    	$.fn.easySlider = function(options){
    	  
    		// default configuration properties
    		var defaults = {			
    			prevId: 		'prevBtn',
    			prevText: 		'Previous',
    			nextId: 		'nextBtn',	
    			nextText: 		'Next',
    			controlsShow:	true,
    			controlsBefore:	'',
    			controlsAfter:	'',	
    			controlsFade:	true,
    			firstId: 		'firstBtn',
    			firstText: 		'First',
    			firstShow:		false,
    			lastId: 		'lastBtn',	
    			lastText: 		'Last',
    			lastShow:		false,				
    			vertical:		false,
    			speed: 			800,
    			auto:			false,
    			pause:			2000,
    			continuous:		false, 
    			numeric: 		false,
    			numericId: 		'controls'
    		}; 
    		
    		var options = $.extend(defaults, options);  
    				
    		this.each(function() {  
    			var obj = $(this); 				
    			var s = $("li", obj).length;
    			var w = $("li", obj).width(); 
    			var h = $("li", obj).height(); 
    			var clickable = true;
    			obj.width(w); 
    			obj.height(h); 
    			obj.css("overflow","hidden");
    			var ts = s-1;
    			var t = 0;
    			$("ul", obj).css('width',s*w);			
    			
    			if(options.continuous){
    				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    				$("ul", obj).css('width',(s+1)*w);
    			};				
    			
    			if(!options.vertical) $("li", obj).css('float','left');
    								
    			if(options.controlsShow){
    				var html = options.controlsBefore;				
    				if(options.numeric){
    					html += '<ol id="'+ options.numericId +'"></ol>';
    				} else {
    					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></div>';
    					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
    					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
    					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></div>';				
    				};
    				
    				html += options.controlsAfter;						
    				$(obj).after(html);	
    
    
    			};
    			
    			if(options.numeric){									
    				for(var i=0;i<s;i++){						
    					$(document.createElement("li"))
    						.attr('id',options.numericId + (i+1))
    						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
    						.appendTo($("#"+ options.numericId))
    						.click(function(){							
    							animate($("a",$(this)).attr('rel'),true);
    						}); 												
    				};							
    			} else {
    				$("a","#"+options.nextId).click(function(){		
    					animate("next",true);
    				});
    				$("a","#"+options.prevId).click(function(){		
    					animate("prev",true);				
    				});	
    				$("a","#"+options.firstId).click(function(){		
    					animate("first",true);
    				});				
    				$("a","#"+options.lastId).click(function(){		
    					animate("last",true);				
    				});				
    			};
    			
    			function setCurrent(i){
    				i = parseInt(i)+1;
    				$("li", "#" + options.numericId).removeClass("current");
    				$("li#" + options.numericId + i).addClass("current");
    			};
    			
    			function adjust(){
    				if(t>ts) t=0;		
    				if(t<0) t=ts;	
    				if(!options.vertical) {
    					$("ul",obj).css("margin-left",(t*w*-1));
    				} else {
    					$("ul",obj).css("margin-left",(t*h*-1));
    				}
    				clickable = true;
    				if(options.numeric) setCurrent(t);
    			};
    			
    			function animate(dir,clicked){
    				if (clickable){
    					clickable = false;
    					var ot = t;				
    					switch(dir){
    						case "next":
    							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
    							break; 
    						case "prev":
    							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
    							break; 
    						case "first":
    							t = 0;
    							break; 
    						case "last":
    							t = ts;
    							break; 
    						default:
    							t = dir;
    							break; 
    					};	
    					var diff = Math.abs(ot-t);
    					var speed = diff*options.speed;						
    					if(!options.vertical) {
    						p = (t*w*-1);
    						$("ul",obj).animate(
    							{ marginLeft: p }, 
    							{ queue:false, duration:speed, complete:adjust }
    						);				
    					} else {
    						p = (t*h*-1);
    						$("ul",obj).animate(
    							{ marginTop: p }, 
    							{ queue:false, duration:speed, complete:adjust }
    						);					
    					};
    					
    					if(!options.continuous && options.controlsFade){					
    						if(t==ts){
    							$("a","#"+options.nextId).parent().css('display', 'none');
    							$("a","#"+options.lastId).parent().css('display', 'none');
    
    							$("a","#"+options.nextId).css('display', 'none');
    							$("a","#"+options.lastId).css('display', 'none');
    						} else {
    							$("a","#"+options.nextId).parent().css('display', 'block');
    							$("a","#"+options.lastId).parent().css('display', 'block');	
    
    							$("a","#"+options.nextId).css('display', 'block');
    							$("a","#"+options.lastId).css('display', 'block');				
    						};
    						if(t==0){
    							$("a","#"+options.prevId).parent().css('display', 'none');
    							$("a","#"+options.firstId).parent().css('display', 'none');
    
    							$("a","#"+options.prevId).css('display', 'none');
    							$("a","#"+options.firstId).css('display', 'none');
    						} else {
    							$("a","#"+options.prevId).parent().css('display', 'block');
    							$("a","#"+options.firstId).parent().css('display', 'block');
    
    							$("a","#"+options.prevId).css('display', 'block');
    							$("a","#"+options.firstId).css('display', 'block');
    						};					
    					};				
    					
    					if(clicked) clearTimeout(timeout);
    					if(options.auto && dir=="next" && !clicked){;
    						timeout = setTimeout(function(){
    							animate("next",false);
    						},diff*options.speed+options.pause);
    					};
    			
    				};
    				
    			};
    			// init
    			var timeout;
    			if(options.auto){;
    				timeout = setTimeout(function(){
    					animate("next",false);
    				},options.pause);
    			};		
    			
    			if(options.numeric) setCurrent(1);
    		
    			if(!options.continuous && options.controlsFade){					
    				$("a","#"+options.prevId).hide();
    				$("a","#"+options.firstId).hide();				
    			};				
    			
    		});
    	  
    	};
    
    })(jQuery);
    
    
    
    
    HTML:
     
    mrpixel, Nov 16, 2012 IP
  2. Deluxious

    Deluxious Greenhorn

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #2
    Do you want the slider to start ON the second slide? (This is an easy fix) Or is the slider not advancing to the second slide...
     
    Deluxious, Dec 22, 2012 IP