Senior Designer and follow co-worker, Alex Budnitz, had requested my developer skills in churning out a portfolio/archive site to display his fine work throughout the years of his established career.
The presented layout and UI of the theme was simple to markup and display solely through CSS. There were very few images to use for the theme (if any), keeping the site bare bones and reliant on CSS, with fallbacks for cross-browser support.
The most challenging part in creating the theme was building a custom carousel which moves horizontally throughout the full viewport. There were a few external scripts I could have used to get this done, but to avoid using bloated code by third party extensions, I decided to take on the challenge and write my own script since it needed to just do one thing.
The carousel works simply by listening to a “click” event registered to the carousel’s left/right buttons and pager controls. Once clicked, the script determines how far left or right to move based on the previous post’s positioning, which initially has been set absolute to the left of its sibling post (including spacing for margins).
There were probably a few ways to do this (all which included math equations I didn’t want to dive into), but I found this method to be the simplest and less processor intensive.
Alex continues to add to his vast collection, which grows the lengths of our carousel, and thus far, hasn’t found a way to break anything (knock on wood). One problem I did encounter initially was once a post’s left position reached ten thousand or more, the carousel cracked. Turns out, the version of jQuery I was using needed to be updated to support what I was trying to do.
The project is still live and can be viewed at http://abudnitz.com.