For this project I was tasked with updating the interactive slider or “TV Screen” that lives on the homepage of Kitchens.com. For the past few years this animated slider, which promotes new and recently updated content, was created in Flash. This presented a few problems for us. First, every time we needed to make a change, I had to manually open up the project and make changes to the images and the animation. Second, because it was written in Flash, anyone who was viewing the site with an iPhone or iPad would just see a static image pointing to a single section of the site. And third, we weren’t using the power of our CMS, having content updated daily and keeping the site “fresh.”

With these new versions of the homepage slider and the photos page slider, all three of these concerns have been addressed. These were created using JQuery and the content is being dynamically pulled from the Ektron CMS that Kitchens.com uses. Additionally, to give the pieces a little more of a designed feel, I used a unique font, hosted by Google Fonts and some CSS3 tricks, like text-shadow and opacity.

It may not be obvious from the pictures below, but users can use the numbered buttons to navigate between slides or can over over the main image to see arrows that take you back and forth. The slides automatically advance every 4 seconds or so, but if the user interacts, the animation stops.

To see the live version of these sliders, see these pages: Kitchens.com homepage and Photos homepage