Auto Switcher: On

Minimal Usage

Here you'll see how simple is implementation of AsyncSlider

$(window).load(
	function(){
		$(".sample_slider").asyncSlider();
	}
);

HTML code:

	

		 Your First Slide
	
	

		Your Second Slide
	
	

		The third slide will have black color! Also you can set it through CSS styles
	

List of Options

There are 13 property options for AsyncSlider, as listed below:

var slider_options = {
	// Core (recommended to set on every declaration)
	direction: "horizontal";
	minTime: 1000,
	maxTime: 1500,
	easing: 'easeInOutSine',
	easingIn: 'easingInBack',
	easingOut: 'easingOutExpo',
	random: true,
	autoswitch: 5000, // New Feature [Version 1.1] - Delay in milliseconds 
	
	// Secondary Options (optional to set)
	keyboardNavigate: true,
	firstSlide: 3,
	
	// Navigation - Next and Prev
	prevNextNav: true,
	centerPrevNextNav: true,
	
	// Navigation - Slide Links
	slidesNav: true,
	slidesNav: $(".slides_nav_container") // Also this way is possible!
};

Description for each of options

• direction Set direction where elements are headed.
  Two directions types are available
  * horizontal
  * vertical
• minTime Minimum time interval where elements are supposed to start moving
  * Unit: Milliseconds
• maxTime The same as minTime but this requires greater value than minTime
  * Unit: Milliseconds
• easing Set easing type for both slides (easing in and easing out)
  If you decide using this property you don't have to fill easingIn and easingOut
• easingIn This animation will be used for outgoing slide
  * Will overwrite the value of easing
• easingOut This animation will be used for incoming slide
  * Will overwrite the value of easing
• random Type of how elements are going to move.
  If false elements will move sequentially (first in first out)
  * true - Random
  * false - Sequential
• autoswitch Slides will auto-switch in specified interval
  Positive number is required, and unit is: Milliseconds
• keyboardNavigate If true, AsyncSlider will add "keyup" event to window which tracks arrow to move slides left or right as well as top or bottom
• firstSlide By default, the first slide is always shown, but you can override this value and set your preferred slide index as primary.
  * Index values start from 1 (not 0 as supposed in arrays)
• prevNextNav Next and Previous navigation. It can be used in two ways:
  1 - true/false - to show or hide
  2 - Set a jQuery object where the menu will be appended. For example: prevNextNav: $(".my_div")
• centerPrevNextNav This will center the Next Prev navigation to the center of slide.
  The value (integer) you set will add margin between both sides (left and right) for example:
  centerPrevNextNav: 10 - will add 10 pixels margin from left and 10 pixels from right (it is very useful)
• slidesNav It's the same as prevNextNav, but this will output hyper links for each slide. Usage:
  1 - true/false - to show or hide
  2 - Set a jQuery object where the menu will be appended. For example: prevNextNav: $(".my_div")

Updating Options

You don't have to recreate instances each time you need to modify something in the slider. With simple declaration you can set/change options of slider for example, change min/max time, set other easing type, change direction, go to preferred slide, etc.
To change options, you have to call the same method as you call on slider instance creation, but in this case you must send 3 parameters: slider.asyncSlider("set", "option", "value");.
Lets see how:

// For better apprach we will create variable that handles with AsyncSlider environment
var as = $(".asyncslider_env");

Changing slides direction (accepted values: vertical, horizontal)

as.asyncSlider("set", "direction", "vertial");

Setting maxTime and minTime

	as.asyncSlider("set", "minTime", 1000);
	as.asyncSlider("set", "maxTime", 1500);

Updating easing type

	as.asyncSlider("set", "easing", "easeInOutBack"); // for both transitions
	
	// for each of them
	as.asyncSlider("set", "easingIn", "easeInBack"); // When element goes out
	as.asyncSlider("set", "easingIn", "easeOutQuad"); // When element comes in

Set elements animation in sequential way

	as.asyncSlider("set", "random", false);

Playing with Auto-switch

 
	// Stop and play
	as.asyncSlider("set", "autoswitch", "on"); // Activate Auto-Switch
	as.asyncSlider("set", "autoswitch", "off"); // De-activate Auto-Switch
	
	// These are the same but they don't destroy setInterval function as two above functions do!
	as.asyncSlider("set", "autoswitch", "play");
	as.asyncSlider("set", "autoswitch", "pause");
	
	// Change time interval - Unit: milliseconds
	as.asyncSlider("set", "autoswitch", 3500);

Remove window event for slide switch via keyboard arrows

	as.asyncSlider("set", "keyboardNavigate", false);

Set first slide index (1,+)

	as.asyncSlider("set", "firstSlide", 3);

Set callback function

	var my_function = function(slide_index){
		// do some stuff here
		// Slide index starts from >= 1
	}
	
	as.asyncSlider("set", "callback", my_function);

Note: Updating navigation links its not supported by this method!

Other Actions

Wait, this is not all! AsyncSlider also allows you to do some other actions such as:

• Switch to different slide
• On switch set direction

How? Check it here:

For example if you want one special link in your site to change slide vertically (change the normal flow where slider was setup)

	$("a.my_contact_link").click(function(e){
		ev.preventDefault(); // this declaration is not part of AsyncSlider
		
		as.asyncSlider("set", "direction", "vertical");
		as.asyncSlider("moveToSlide", 2, 'right'); 
		// at third parameter if direction is horizontal set: right,left - if vertical: top,bottom
	});

Other Custom link that goes always in previous slide, forcing slides to go left-to-right

	$("a.other_link").click(function(e){
		ev.preventDefault();
		
		as.asyncSlider("prev", "left"); // if direction is vertical use: top or bottom
		
		/* 
			Also you can use next direction
			as.asyncSlider("next", "right");
		*/
	});

Summary

	// Go to previous slide
	as.asyncSlider("prev");
	
	// Go to next slide (second parameter defines inline direction)
	as.asyncSlider("next", "top");
	
	// Go to slide by specified index (1,+)
	as.asyncSlider("moveToSlide", 3);
	

2011 © AsyncSlider. Created by Arlind Nushi. You can purchase this item exclusively at CodeCanyon.net