Responsive & Animated jQuery Accordion Plugin - conventAccordion

Responsive & Animated jQuery Accordion Plugin - conventAccordion
File Size: 520KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

conventAccordion is a fast and beautiful jQuery plugin that allows you to create responsive horizontal and vertical accordion slider with cool Elastic Collision Effects on your page. It comes with 4 built-in themes that helps implement your accordion slider easily and quickly.

Features:

  • 4 stylish themes included: basic (default), dark, light or stitch;
  • Horizontal (default) or vertical accordion
  • Responsive layout
  • Many options for creating your own accordion slider

How to use (Use Stitch THEME and Responsive Layout as an example)

1. Include conventAccordion CSS

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>

2. Markup

<ol class="rounded stitch" id="accordion_1" style="width: auto; height: auto; list-style-type: upper-roman">
<li>
<div>Slide One</div>
<div>
<figure> <img src="img-demo/1.jpg" alt="image" />
<figcaption>Assassini!</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Two</div>
<div>
<figure> <img src="img-demo/2.jpg" alt="image" />
<figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Three</div>
<div>
<figure> <img src="img-demo/3.jpg" alt="image" />
<figcaption>That's one angry looking red dude.</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Four</div>
<div>
<figure> <img src="img-demo/4.jpg" width="768" alt="image" />
<figcaption>Was fun for a couple of hours or so...</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Five</div>
<div>
<figure> <img src="img-demo/5.jpg" alt="image" />
<figcaption>Not as good as Hot Pursuit.</figcaption>
</figure>
</div>
</li>
</ol>

3. CSS For this example

figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}
figcaption {
padding: 10px 15px;
position: absolute;
bottom: 20px;
right: 30px;
z-index: 3;
background: black;
background: rgba(0,0,0,0.7);
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px
}

4. Include necessary javascript files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.conventAccordion.js"></script> 

5. Call the plugin with options

<script>

(function($, d) {
	
	$('#accordion_1').conventAccordion({ 
		autoPlay: true, // Automatically cycle through slides
		startSlide: 1, // Displays slide (n) on page load
		slideInterval: 5000, // Time between slide cycles
		pauseOnHover: true, // pause On Hover
		actOnHover: true, // activate On Hover
		continuous: false, // autoPlay one cycle or continuous
		autoScaleImages : true, // If a single image is placed within the slide, this will be automatically scaled to fit
		slideSpeed: 3000, // Animation speed
		easing: 'easeOutBounce' // custom easing function
		// minContainerWidth : 300, minimum width the accordion will resize to
		// maxContainerWidth : 960, maximum width the accordion will resize to
	});

	});
	
})(jQuery, document);

</script>

6. Methods

play                                // trigger autoPlay on a stopped accordion
stop                                // stop an accordion playing
next                                // trigger the next slide
prev                                // trigger the previous slide
active,n                            // trigger slide n
destroy                             // remove the accordion, destroying all event handlers and styles (unstyled html content will remain)
debug                               // returns a debug object

Example:

$('[SELECTOR]').conventAccordion('[METHOD]');

Change Log:

v1.0.3 (2013-03-12)

  • Added css files for vertical slides, gallery and rotating banner.

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.