Open Source jQuery Carousel

Googling around for a jQuery carousel the other day, I found that the market consisted of literally tons of solutions, many of which were not open source and actually required you to pay to use them! This was a huge change from I first created my original jQuery carousel project because there was almost nothing to be found back then. The lack of quality caused me to go back and dust off my old project and bring it up to standards, while of course keeping it as free, open source, and easy to implement as always.



github: github.com/justinmc/jQuery-Open-Carousel
demo: justinmccandless.com/demos/jQuery-Open-Carousel/index.html
old blog post: An Updated Scrolling Image Bar
older blog post: Scrolling Image Bar


The main idea driving this project was to create something that was as easy to implement as possible without touching any javascript, while also being simple enough to extend to fit any more specific application. Everything you see in the demo was done without touching any javascript, just by passing settings parameters and changing a bit of CSS.

All of the setup details are in the README on Github, so I'll spare reposting that here. Instead, lets get to the point and take a look at a fully featured example implementation of the project with code. This one is in the demo, and it's in the form of a filmstrip of pictures from my trip to Qingdao.




Previous Next





Here is the HTML to set that up:





Simple. All of the detail is in the javascript. The linked thumbnails were done with the simple linking system that scrolls to the given slide in data-ocarousel-link, but it shows the cool stuff you can do without even hacking the javascript at all. Everything else is simply a window .ocarousel-window that you can set to whatever size you want to view your content. The actual slides are made up of whatever you stick inside this window.

I rewrote the project using coffeescript this time, so all of the comments are there if you want to see how it works. I highly recommend taking a look and changing things to suit your project if it lies beyond this initial scope.