Orbit is an awsome image slider plugin with HTML5 features. It uses Jquery so it is a jquery slider. The size is near 4kb. Works best in Chrome, Safari, FF3.5+ (but is tested for IE7+, FF3.5+, Chrome and Safari). You can add awsome captions and use css3 to style it. You can use custom fonts also.
An HTML5 Jquery slider is Orbit.
Full HTML Captions
Orbit slider has full HTML captions. You can add styles, links, lists,etc into your code.
- Add a span with the class “orbit-caption” and an ID of your very own choosing after the slider div. Put whatever HTML you’d like to appear in the caption inside. They’re block level, so anything goes.
- Add the span ID you chose to the “data-caption” attribute on the corresponding image tag.
Bullet Navigation
The glorious new bullet navigation is as easy as passing a parameter when you call the Orbit function. The bullet nav is natively an unordered list of increasing numbers, but for the example and the kit we’ve replaced them with nice, little round bullets (but changing this is a just a matter of changing the CSS how you like)
Using Content
Orbit slider is now content compatible! It can be mixed in with images, but just make sure your content is in a “div” tag and has a background of some type (otherwise images behind it become visible). To make sure your content looks nice, be sure to give it a background (so other images in Orbit dont bleed behind it). Just drop it right into the markup.
Download Orbit
Grab the Orbit kit which has the markup, the CSS, the plugin, jQuery 1.5.1 minified and some basic images.
Now On GitHub
The Orbit is on Gitub to make handling code maintenance and issue tracking easier. Please log issues through GitHub henceforth 🙂
Live Demo
You can view the live demo Here
Related articles
- Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows (coding.smashingmagazine.com)
- jQuery Plugins – Plugins, Extensions & Tutorials for jQuery JavaScript Library (jqueryplugins.com)
- 21 Amazing jQuery Images Galleries Sliders and Slideshows Plugins (onextrapixel.com)
- 5 Top jQuery Chart Libraries for Interactive Charts (advancedphptutorial.blogspot.com)
- Aline Ohannessian: An Outstanding Collection of Resources for #WordPress Content Sliders | via @nenuno (nenuno.co.uk)
- 14 Useful jQuery Plugins For Web Designers And Developers (smashingwall.com)
- 15 jQuery Sliding Tutorials (slodive.com)
- filterByData jQuery Plugin: Select by HTML5 Data Attr Value (elijahmanor.com)
- Slider Kit, sliding contents with jQuery (kyrielles.net)
- Move (Copy) Div From One Place To Another Using jQuery (viralsolani.wordpress.com)
Doesnt work in Chrome: http://www.zurb.com/playground/jquery_image_slider_plugin
Well now i clicked and it worked but for the first time :/