Design Lunatic

Create a Super-Simple Jquery Content Slider

Content sliders are generally a good thing. They minimize screen usage, and can show lots of content in one small space. Today, I will show you how to build a super-simple content slider, with the barest of styles.

We will begin with some html markup.

<div class="container">
	<div class="nav">
	</div>
	<div class="main">
		<div class="main_inner">
		</div>
	</div>
</div>

We have a main container, so we can center it on the page. We have a div set aside for the navigation. We also have a main container, as well as a main_inner container. The logic behind this is that when you click on a navigation tab, the “main_inner” div changes its margin-left, so the content ends up being displayed in the main container. The main container also has overflow set to hidden, so we don’t see the rest of the content when we don’t want to.

Now, we’ll populate the divs.

<div class="container">
	<div class="nav">
		<div class="tab"><a class="tab_link" id="tab_1" href="#content1" rel="1">Content 1</a></div>
		<div class="tab"><a class="tab_link" id="tab_2" href="#content2" rel="2">Content 2</a></div>
		<div class="tab"><a class="tab_link" id="tab_3" href="#content3" rel="3">Content 3</a></div>
	</div>
	<div class="main">
		<div class="main_inner">
		<div class="content" id="content1">
			<p>This is content 1. Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
		<div class="content" id="content2">
			<p>This is content 2.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
		<div class="content" id="content2">
			<p>This is content 3.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
		</div>
		</div>
	</div>
</div>

Now that we have some simple html, it’s time to spice it up a little with good ol’ css.

.container {
width: 500px;
height: 335px;
margin: 0 auto;
}

.nav {
width: 500px;
height: 35px;
margin-left: 1px;
}

.tab {
float: left;
height: 35px;
padding-left: 7px;
padding-right: 7px;
text-align: center;
line-height: 35px;
border: 1px solid #777777;
border-bottom: none;
margin-left: -1px;

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

.tab:hover {
background: #eeeeee;
}

a {
text-decoration: none;
color: #555555;
display: block;
width: 100%;
height: 100%;
}

a:hover {
color: #333333;
}

.main {
width: 500px;
height: 300px;

border: 1px solid #777777;

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;

overflow: hidden;
}

.content {
width: 500px;
height: 300px;
font-family: arial;
font-size: 14px;
line-height: 21px;

float: left;
}

Explanations: Our content divs will be 500px wide and 300px tall. They are floated to the left so that the content scrolls horizontally. If you wanted, you could make the content scroll vertically by removing the float:left property, and editing the jquery that I will show you in a moment. The navigation will be 35px tall, which is a good tab height. We also have some simple content styling.

Now, we move on to the javascript. We need a script that looks at the “rel” attribute of the tab links, writes that to a variable, and then uses that variable to set the margin-left of “main_inner” to the right amount.

$(document).ready(function(){

var height = '300';
var width = '500';

var slides = 3;

$('.main_inner').css({
	width: slides * width,
});


$('a.tab_link').click(function(){

var contentNum = $(this).attr('rel');

var marginToScroll = width * contentNum - width;

$('.main_inner').animate({
	marginLeft: '-' + marginToScroll,
}, 500);

return false;

});

});

We have to set the width and height of the content divs. Actually, the height isn’t necessary, but it is useful if you want the content to scroll vertically. We have a variable called slides, which is how many content divs we have. We need this to set the width of main_inner to the right amount.

Now, the jquery that actually makes everything work. When you click on a tab link, the rel is written to a variable. We then use that variable to animate main_inner’s margin-left to what we need. Width times the content number. The width of the content times the rel of the link. This gives us a margin-left. However, we need to subtract the width because in computer programming languages, counting doesn’t start with 1. It starts with 0. Our first tab link on the other hand points to “1″. This messes up our math a little, so we need to have the last “- width” portion which fixes this error. And at the end, we have a “return false” so that the browser doesn’t actually follow the link.

There you have it: A simple jquery content slider. As you might have noticed, it looks exactly the same as the css-only tab widget we made earlier. The reason for this is because I’m not teaching you how to make things pretty. I’m teaching you how to make things work. Have fun and good luck!