For a while now, I've wanted to create a layout where large sections of content are transition via a carousel. Not like those annoying list articles that display each entry in a separate slide (it's related content, it should be displayed together!) or those faux carousels that look like a slider but once you click the 'Next' link, you get a page reload.
Ideally, this content would be generated dynamically via AJAX calls and carousel slides would be created and destroyed as necessary. Another consideration of such an implementation is Drupal, I wanted to create a dynamic content carousel that would work well with Drupal (and the Omega 4 base theme).
Previously, I've had the opportunity to create structures similar to this, but I've never had the chance to go the whole way and implement AJAX and dynamic slides. Previous projects only required a few pieces of content so initialising a carousel complete with all slides (one for each piece of content), while not optimal, was acceptable given the constraints of the project.
I've played around with Views to achieve my ideal solution, but I was never completely happy with the results.
I knew even before creating my personal site that I was going to play around with the idea of a dynamic content carousel and see what happens. I've always thought a dynamic carousel would work well on blog article pages, this led me to create the implementation that is currently in use on this page!
I broke the problem down into three areas:
- AJAX in Drupal - How does this work with nodes? Can I get individual sections or whole pages?
- Next and Previous buttons - How can I find the next and previous article relative to the current one?
- Carousel Implementation - Which carousel should I use? Should I create my own?
I've tackled each area in a separate article...find the links below: