jQuery Banner Rotator Script

lightweight & simple - jQuery banner rotator - javascript slider

Today I completely rebuilt a jQuery Banner Rotator script that I had written a long time ago. I had posted it on this site, for a while, but as a few major bugs came to the surface, I thought it was best to take it down until I had a chance to do a re-build. 

I'm happy to be able to announce that the latest version is much more stable, lightweight and easier to use.

Using the Script

  • copy the contents of style.css to your CSS file.
  • include bannerRotator.js to the pages you want to use it on.
  • create an un-ordered list (with a unique ID) that contains your linked banners. 
  • tell the script the unique ID, how long each transition should last, how long to hold each banner and if you want the navigation links visible. e.g.
    bannerRotator('#yourUniqueID', 500, 5000, true);

If that doesn't make sense to you, just check out the index.html or view the source of the demo and you should be able to copy how its done there.

Spread The Love


jack's picture
posted by jack on Dec 11 2010

I'm working on some cool things right now for this...
- overlaying text
- youtube/vimeo integration

watch this space

Anonymous's picture
posted by Anonymous on Jan 14 2011

I get this error when i run it
ReferenceError: Can't find variable: currentClassName

jack's picture
posted by jack on Jan 19 2011

currentClassName is the unique identifier for the current visible li. If there are no visible list items then it wont get set.

Are you putting the ID of the ul element into the function as the "selector"?

jack's picture
posted by jack on Jan 24 2011

Thanks for spotting this ;-) I've re-uploaded with changes to fix this.

Nikke's picture
posted by Nikke on Mar 30 2011

Can this be integrated to a jason query from a mysql database?

jack's picture
posted by jack on Apr 05 2011

Hi Nikke - yes it could. You would need to query all the info from DB and then dynamically create the list items based on the results.

Content management systems can often do this for you e.g. using views in Drupal.

Nikke's picture
posted by Nikke on Apr 05 2011

Thanks Jack! Now that I have an idea of what needs to be done, I will see if I could even code this :)

Thanks for the great script and this web page is very slick! Keep up the good works!

jack's picture
posted by jack on Apr 05 2011

great! If you have questions don't hesitate to ask!

Xand's picture
posted by Xand on Apr 12 2011

Been using this script on a test site for a good few months now, I've just increased the number of banners from 2 to 3 and it seems the script won't hide the third "slide" after it's done showing it and just leaves it as display:list-item.

any ideas? as I'm quite a fan of this script

jack's picture
posted by jack on Apr 12 2011

hmmm... its not doing that in the demo... have you modified the script in anyway?

it might be helpful if you could send me a link to the script. feel free to use the contact form if you don't want to post in the comments.

xana's picture
posted by xana on Jul 03 2011

Hi- Great script! I got it running easily except that I'd like it to go really slowly. I changed the pauseTime in bannerRotator.js to 80000 but it seems to be going the same speed. Is this the correct place to change? I've re-uploaded the script & tried it on a few browsers. url is: lunaroma.com/test2/banner_test.html. Any help is appreciated thanks!

Matt's picture
posted by Matt on Jul 04 2011

im trying to get the banners centered on my size but they seem to always flush to the left? If there any code in the js controling the aligment?

jack's picture
posted by jack on Oct 13 2011

Apologies for the download link be down for a while... this is fixed now.

Ahmed's picture
posted by Ahmed on Nov 09 2011

Thank you! You're awesome!

ryan's picture
posted by ryan on Nov 30 2011

Hello, and thanks for the great script. Works well and is easy to use. One question: how do I hide the navigation buttons? I tried changing the following line in index.html:

bannerRotator('#bannerRotator', 500, 5000, false);

Shouldn't the "false" hide the navigation buttons? Or do I need to do something else? Thanks.

Simon's picture
posted by Simon on Dec 21 2011

I've found the js looks for nav!=null so just omit the "false" and it should work

Aram's picture
posted by Aram on Apr 03 2012

Thanks for sharing,
I have used it on my website, but sometimes it doesn't work correctly. It shows all images at once (horizontally ordered), then begins hiding the top one, then second one ... After the hiding the last one, it shows all banners again.
Can you please advice me what do i need to change?
Thank you

jack's picture
posted by jack on Apr 03 2012

Sounds like you need to set display:none; on the <li> in the css

Ralston Vaz's picture
posted by Ralston Vaz on May 08 2012

Just wanted to drop a note to say how very useful this was for me today. Awesome stuff. Thanks for openly sharing.


jack's picture
posted by jack on May 11 2012

glad it was helpful ;-)

Denver's picture
posted by Denver on May 16 2012

Thanks so much Jack. Its nice and helpful.

Rank Us

Rank BEACON9 with a tweet...

Got Skillz?

If you've got ninja web skillz and are interested in working with us, get in touch!

Ready to rock? Get in touch for a free consultation & quote.Get in touch

Copyright © 2012 BEACON9 Media Ltd. All Rights Reserved.

Powered by Drupal A BEACON9 Creation