The Problem with Carousels
I started writing the plugin when I noticed how long it was taking me to implement other peoples carousels into my designs. The html required for most carousel plugins is just too precise, and if you don’t have the exact markup required, the carousel will refuse to work.
Billy is Different
This is where Billy comes in. The carousel has several different stages of functionality, and it will adjust it’s self depending on the html you decide use in your page. For example if I just wanted to use a basic scrolling carousel, the html I would use is:
- A Slide
- A Slide
- “billy_scroller” will be magically transformed into a carousel. That literally took 2 – 3 minutes to get working! The “clip” div is just there to prevent the hidden area of the carousel from showing (see the demo for an example).
- for each slide in your carousel (it will even give it an active class when the corresponding slide is in view).
And the navigation arrows? Just as simple; again, you can put these anywhere on your page:
With a few settings tweaked. The carousel becomes a solid tab area
Code for this example
What if I want Extra Features?
Well good question, it’s becoming more common practice these days to give users as much interactivity as possible on our websites. This keeps users engaged, and therefore on our site for longer. So what if you want to add some interactivity to Billy, like slide indicators, and navigation arrows?
Well it’s easier than it sounds. To add indicators to your carousel, just include a second
- anywhere on your page, with the id “billy_indicators”:
Billy will then do it’s thing and add in a