jQuery Banner Rotator Script
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.
Rank Us
Rank BEACON9 with a tweet...
What's Popular
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
Recent Work
Comments
I'm working on some cool things right now for this...
- overlaying text
- youtube/vimeo integration
watch this space
I get this error when i run it
ReferenceError: Can't find variable: currentClassName
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"?
Thanks for spotting this ;-) I've re-uploaded with changes to fix this.
Can this be integrated to a jason query from a mysql database?
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.
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!
great! If you have questions don't hesitate to ask!
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
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.
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!
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?
Apologies for the download link be down for a while... this is fixed now.
Thank you! You're awesome!
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.
I've found the js looks for nav!=null so just omit the "false" and it should work
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
Sounds like you need to set display:none; on the <li> in the css
Just wanted to drop a note to say how very useful this was for me today. Awesome stuff. Thanks for openly sharing.
+Ralston
glad it was helpful ;-)
Thanks so much Jack. Its nice and helpful.