Content Slider Snippet

by kirupa   |   15 November 2012

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.

Go Beyond the Snippet

To learn how to create your own content slider (as opposed to just copying/pasting the snippet), check out the Creating a Sweet Content Slider tutorial.

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:

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

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus