Creating Web Animations

Chapter 15. Creating a Sweet Content Slider

One of the biggest problems facing Western civilization is figuring out clever ways to display a large amount of content in a small space. One effective solution involves placing content in sequential blocks using what is known in the industry (and the ’hood) as a content slider. You may have never heard of it, but I’m willing to bet that you definitely have seen and used it.

To help jog your memory and to give you an idea of what you will create, navigate your browser to http://bit.ly/content_slider or check out the following video:

With your content slider actually loaded in your browser (or playing back as a video), click on the circular links to see the slider in action. Depending on which link you click, the appropriate content will slide into view.

In this chapter, you will learn how to create your own sweet content slider that is very similar to this. Beyond just creating a content slider, you will learn a great deal about how the HTML, CSS, and JavaScript combine to make this example work.

Overview of How It Works

Before diving in head first and adding the HTML, CSS, and JavaScript to make it all work, let’s take a step back and try to understand the big pieces that make up our content slider.

First, you have the content that you want to slide:

Your content can be anything—images, normal HTML content, a combination, ...