Plugins in action

Here are the available plugins in action:

1. autoplay
2. carousel
3. mousewheel

You can additionally see a demo where all the plugins are used together.

Autoplay plugin:

jQuery Code:

	$(function(){
		window.api = $("#trigger1").switchable("#panel1 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3,
			circular: true
		}).autoplay({ api: true });
		
		$("#next1").click(function(){
			api.next();
		});
		$("#prev1").click(function(){
			api.prev();
		});
	});
	

Carousel plugin:

jQuery Code:

	$(function(){
		$("#trigger2").switchable("#panel2 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).carousel();
		
		var api2 = $("#trigger2").switchable();
		$("#next2").click(function(){
			api2.next();
		});
		$("#prev2").click(function(){
			api2.prev();
		});
	});
	

Mousewheel plugin:

jQuery Code:

	$(function(){
		$("#trigger3").switchable("#panel3 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).mousewheel();
		
		var api3 = $("#trigger3").switchable();
		$("#next3").click(function(){
			api3.next();
		});
		$("#prev3").click(function(){
			api3.prev();
		});
	});
	

Chaining plugins:

jQuery Code:

	$(function(){
		$("#trigger4").switchable("#panel4 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).autoplay().carousel().mousewheel();
		
		var api4 = $("#trigger4").switchable();
		$("#next4").click(function(){
			api4.next();
		});
		$("#prev4").click(function(){
			api4.prev();
		});
	});