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



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:

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