One of the more common ways of displaying content is through the use of what is known as a content slider. Even if the name doesn't ring a bell, I'm sure you've seen them around. Anyway, what a content slider does is pretty simple. It allows you to display a portion of some large content without taking up a lot of space. To see the rest of the content, you slide to the location of your new content by interacting with some UI element the content slider defines.

The Example

If you've never seen a content slider before, no amount of explaining verbally will help. Instead, below is an example of a content slider running (you can also view it in its own page):

Click on the numbered, gray squares to have your content slider slide. The content you see is based on which numbered square you clicked.

The HTML

The relevant HTML for this example look as follows:

<div id="contentContainer">
	<div id="wrapper">
		<div id="itemOne" class="content">
			<h1>AaBbCc</h1>
			<p>For some reason, everybody likes <strong>Helvetica</strong>. In order to fit in, I have learned to like it as well.</p>
		</div>
		<div id="itemTwo" class="content">
			<h1>AaBbCc</h1>
			<p>Did you know that <strong>Georgia</strong> was designed by 
			Matthew Carter in 1993? Neither did I.</p>
		</div>
		<div id="itemThree" class="content">
			<h1>AaBbCc</h1>
			<p>The Impact font is used by people who want to make a difference 
			in the world.</p>
		</div>
		<div id="itemFour" class="content">
			<h1>AaBbCc</h1>
			<p>By using Comic Sans, the things you write automatically become 
			funnier. Try it out sometime!</p>
		</div>
	</div>
</div>
<div id="navLinks">

	<ul>
		<li class="itemLinks" data-pos="0px">1</li>
		<li class="itemLinks" data-pos="-550px">2</li>
		<li class="itemLinks" data-pos="-1100px">3</li>
		<li class="itemLinks" data-pos="-1650px">4</li>
	</ul>

</div>

There are two major things to note here. The contentContainer div contains the four items we will allow users to scroll through. The navLinks div houses the four navigation squares.

Oh, and one more thing to note! Notice that each of the list items under navLinks has a data-pos custom attribute that specifies the pixel position this content is visible properly in.

The CSS

There is a lot of CSS that corresponds to each item displayed. I'm going to skip that and focus on only the most crucial chunk:

#contentContainer {
	width: 550px;
	height: 350px;
	border: 5px black solid;
	white-space: nowrap;
	overflow: hidden;
}
#navLinks {
	width: 550px;
}
.content {
    float: left;
    height: 350px;
    white-space: normal;
    width: 550px;
}
#wrapper {
	width: 2200px;
	position: relative;
	left: 0px;
	transition: left 1s ease-out 0s;
}

All of this CSS is responsible for sizing the outside container, clipping the contents to only show what is inside the container, and arranging our items horizontally.

The JavaScript

Despite using CSS Transitions, this example is still fairly JavaScript heavy. I've posted all of the JS in its full glory below:

var wrapper = document.getElementById("wrapper");

for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setPosition, false);
}

addClass(links[0], "active");

function setPosition(e) {
	removeActiveLinks();

	var clickedLink = e.target;
	addClass(clickedLink, "active");
	
	var position = clickedLink.getAttribute("data-pos");
	wrapper.style.left = position;
}

function removeActiveLinks() {
	for (var i = 0; i < links.length; i++) {
		removeClass(links[i], "active");
	}
}

function addClass(element, classToAdd) {
    var currentClassValue = element.className;
     
    if (currentClassValue.indexOf(classToAdd) == -1) {
        if ((currentClassValue == null) || (currentClassValue === "")) {
            element.className = classToAdd;
        } else {
            element.className += " " + classToAdd;
        }
    }
}

function removeClass(element, classToRemove) {
    var currentClassValue = element.className;
     
    // removing a class value when there is more than one class value present
    // and the class you want to remove is not the first one
    if (currentClassValue.indexOf(" " + classToRemove) != -1) {
        element.className = element.className.replace(" " + classToRemove, "");
        return;
    }
     
    // removing the first class value when there is more than one class
    // value present
    if (currentClassValue.indexOf(classToRemove + " ") != -1) {
        element.className = element.className.replace(classToRemove + " ", "");
        return;
    }
     
    // removing the first class value when there is only one class value 
    // present
    if (currentClassValue.indexOf(classToRemove) != -1) {
        element.className = element.className.replace(classToRemove, "");
        return;
    }
}

Most of the code revolves around setting up event handlers and ensuring classes are added/removed properly. Pay close attention to the lines where I set the left CSS property explicitly in code to trigger the transition that is set to animate any changes to the left property. This transition does its thing even if a change was made using JavaScript. Pretty nifty!

Further Exploration

If you want to know more about techniques demonstrated in this snippet or other clever ways it can be used, check out the following articles:

• Add Class and Remove Class
• Clipping Content Using CSS
• Handling Events for Multiple Elements
• Custom Data (data-*) Attributes
• Arrays in JavaScript

Yes, there is a lot of extra reading you can do to fully understand what this snippet actually does.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!