Fluid Fader: A jQuery Plugin to Create a Fluid Image Carousel

Posted in Tutorial tagged with jquery Sun 30 Oct 2011 10:21 am

View the demo and fork on GitHub.

Fluid websites are a great method to create a responsive website. CSS can be used to create both fluid images and videos, but what about other web design elements? I was recently involved with a project that was using media queries to deliver the site over multiple platforms, and needed an image slider that was fluid. Google didn’t deliver, so I made one myself!

The code is available on GitHub, as was created as a plugin for jQuery. Once you have jQuery in your page, create your HTML and CSS as described on the demo page, and then call Fluid Fader like so to create your image gallery.

$('#fluid-fader').fluidFader();

Browser Warfare

Fluid Fader work well across all browsers (yeah, including skanky old IE6), but because it needs quite a lot of CSS to make it work, I would suggest thorough testing.

Enjoy!

Sloppily typed by Nick Pyett