Author: Shekhar

Before a week one my friend had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin – but couldn’t make it. That made to write my own custom plugin that consist both carousel and accordion effect. Another one requirement was to flyout the most closed sibling elements to outside and hide rest of all when accordion expands.

So here I come with a solution and made it a plugin so that it might be useful for all of us. I love to code for re-use.

Demo

Usage:

Here is the how you can you can use this plug-in to work on your side:

HTML Markup

<div id="accarousel">
   <ul>
	<li>
              <a class="stand">Initial visible contents</a>
              <div class="detail-panel">Contents for accordion when exapands</div>
        </li>
   </ul>
</div>

You can add as many <li> as you want and any kinds of contents inside ‘.stand’ and ‘.detail-panel’. Pagination will occur according to your choice to group how many items should be visible on stage. Now you need to initialize the plugin. Before that you must include he plugin source in your html page. Include our plugin file after you added the main jQuery library.

Scripts

<script type="text/javascript" src="jquery.cjAccarousel.min.js"></script>

Now add the following script on the page, better you put this script at end of the page:

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(); //#accarousel is your selector ID, see the html mark up above.
    });

Further more you have more options to customize to fit your requirement and ease of work. Till the date, you can set your own values for following options:

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(
          {
              stand		: '.stand',        /* Visible stands element selector (class basically) */
              panel		: '.detail-panel', /* Expandable element selector (class basically)   */
              pagerClass	: 'pager',         /* Pager CSS Class */
              x			: '.detail-panel', /* Panel Collapse handler */
              groupOf		: 5,               /* Number of stands for visible group*/
              scrollSpeed	: 1000,            /* Carousel Speed */
              ease		: 'swing',         /* Use jQuery Easing Plug in for more easing effects */
              flyOutGap	        : 3,               /* Gap between expanded and other two flyouts */
              nextPrev	        : true             /* set false to disable Next/Prev Nav */

          }
	);
    });

You can add our basic styling CSS to get started and after all you can edit/modify it according to your need. That’s it.  If you’re happy to get a copy of my scripts, get it here:

Download

I will be working more on it, adding more features and effects. I would appreciated if you guys can give me valuable feedback on it. Also if you encounter any problem, let me know in the comments below.