A Reusable AngularJS Carousel Directive
Every cool app needs a Carousel. Its not cool till it has one. And so, there are a dozen or so variations of an AngularJS Carousel Directive out there in the wild. But here at Fundoo Solutions, we felt we needed yet another one. So why on earth would we create yet another one?
Well, we did the sane things first. We
- Modified Twitter Bootstrap to use its Carousel as a directive
- Modified tons of jQuery carousels
- Finally tried writing our own
When we started, our aim was to just show some data in a carousel. Simple, and Twitter Bootstrap worked great for it. But then, we had a requirement where there would be potentially 3000 – 4000 elements to be shown in the carousel. And then someone added a requirement that it had to work in IE9. And then in IE8. And thus, the AngularJS Carousel Directive was born.
We wanted to do a few things when we started out:
- Not load future elements unless it was to be displayed
- Try and reuse divs. So displaying 1000 elements should require the same number of Div elements as 10. This was especially needed to keep IE8 and IE9 fast.
- Work in IE8 and IE9. That meant, either No CSS3 transitions or have fallbacks. We ended up going completely with jQuery in the end.
- Allow changing the contents, jumping to a certain page without reloading the entire thing.
- Give enough flexibility to change the look, feel of the contents as well as the next / previous / jump to page buttons
We had the AngularJS expertise to pull this off, but we were still slightly worried about reusing the divs. But then, we happened upon Cubiq’s SwipeView. This was what we wanted (in terms of the endless loopable, responsive carousel). And so, this became the base for our AngularJS Carousel Directive.
We excavated, rewrote and modified significant portions of the code, till finally, we ended up with something that did everything we wanted and needed. So without further adieu: