zAccordion

zAccordion is a horizontal accordion plugin for jQuery

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Implementation

HTML

<ul id="featured">
	<li>
		<image src="diner.jpg" alt="Old School Diner" />
	</li>
	<li>
		<image src="pool.jpg" alt="Vintage Pool" />
	</li>
	<li>
		<image src="gas.jpg" alt="Retro Gas Pump" />
	</li>
	<li>
		<image src="car.jpg" alt="Old Car Steering Wheel" />
	</li>
</ul>

Javascript

$(document).ready(function() {
	$("#featured").zAccordion({ 
		easing: 'easeOutBounce',
		timeout: 5500,
		slideWidth: 600,
		width: 900,
		height: 310
	});
});

Configuration

Options

timeout: 6000, /* Time between each slide (in ms). */
width: null, /* Width of the container. This option is required. */
slideWidth: null, /* Width of each slide in pixels or width of each slide compared to a 100% container. */
tabWidth: null, /* Width of each slide's "tab" (when clicked it opens the slide) or width of each tab compared to a 100% container. */
height: null, /* Height of the container. This option is required. */
startingSlide: 0, /* Zero-based index of which slide should be displayed. */
slideClass: null, /* Class prefix of each slide. If left null, no classes will be set. */
easing: null, /* Easing method. */
speed: 1200, /* Speed of the slide transition (in ms). */
auto: true, /* Whether or not the slideshow should play automatically. */
trigger: "click", /* Event type that will bind to the "tab" (click, mouseover, etc.). */
pause: true, /* Pause on hover. */
invert: false, /* Whether or not to invert the slideshow, so the last slide stays in the same position, rather than the first slide. */
animationStart: function () {}, /* Function called when animation starts. */
animationComplete: function () {}, /* Function called when animation completes. */
buildComplete: function () {}, /* Function called after the accordion is finished building. */
errors: false /* Display zAccordion specific errors. */

Methods

start /* Start the accordion. */
stop /* Stop the accordion. */
trigger /* Trigger a specific slide. */
destroy /* Destroys accordion, unbinds events, and removes styles. */

Examples

• A Barebones Example
• An Advanced Example - Demonstrates animationStart, animationComplete, and startingSlide
• Another Advanced Example
• Fade in the Accordion - Demonstrates buildComplete
• A Responsive Example using Media Queries