So, I was working away on a website the other day which had quite a rich UI. Lots of nice effects such as datepickers, accordions, sliders and basically jQuery UI enabled me to smash them all out in one go and quite easily, with one exception:

jQuery UI has no horizontal accordion

This caught me off guard as jQuery UI has most other UI elements you would usually need; including a vertical accordion. So the problem here was I needed to incorporate functionality for this new accordion without bloating the already heavy website’s file size even further. It also needed to be backwards compatible as far back as IE6.

Long story short I developed a small bit of javascript (using the jQuery framework) that can get this up and running quite easily (<2kb).

I then decided I would put a little more time into it and create a plugin that anyone could use and customise. So here it is, my first jQuery plugin: Bayan. I haven’t put that much time into it yet, but it seems to work well across all browsers, so if you notice any issues, let me know please.

Here are just some of the features:

  • Can support as many slides as you like. (Within the bounds of the container of course)
  • Can support almost any type of content in the main slide area. Images, text, iFrames etc.
  • Easily configurable animation speed
  • Can be controlled by mouse click or on mouseover
  • Next/previous slide buttons can be easily set up.
  • The theme can be easily modified through CSS file

Have a look at my plugin, leave some comments and let me know what you think.


  1. Schnelliot says:

    Wack in some easing options on the animation so it slows down as the animation is finishing or vice versa.

  2. matt says:

    hey, how can i add buttons to change the slide to a specific slide?

    if i change ‘next’ in the a and bazan, it doesnt work…eg.
    <a href=”#” rel=”nofollow”>Bags</a>
    if(options.bags) {
    $(options.bags).click(function() {

    and add bags:false, to the functions, it doesnt work :S

    • Sorry that functionality is not currently in place as I honestly didn’t think it would need to be used.

      The control_tabs() function is not accessible outside of the plugin which is why you’re code doesn’t work.

      If I get a chance to update this plugin I may look at including functionality to do that, but it will be some time away.