Creating your own CSS3 Slider

Over the last week or so, I have been reading a number of articles that cover the latest features available in CSS3. I was especially interested in the new capabilities to animate objects with CSS rather than relying on Javascript or flash.

Since coming back after the New Year, I set myself the challenge of writing a quick and easy slider widget that utilises the above techniques. You're probably thinking ‘not another slider’… well, fair enough, its nothing ground breaking, but what I wanted to show here was how simple it is to create one from scratch with a minimal amount of code.

Hopefully this will allow you to create your own in the future, rather than trying to hack around with one you found on the web, to make it fit your site design.

To begin with, we need the following html code:

<section id="slider">
	<div id="inner-slide"></div>
	<ul>
		<li><a href="" onclick="moveslider(1);return false"> </a></li>
		<li><a href="" onclick="moveslider(2);return false"> </a></li>
		<li><a href="" onclick="moveslider(3);return false"> </a></li>
		<li><a href="" onclick="moveslider(4);return false"> </a></li>
	</ul>
</section>

Select all Open in new window

There are three key elements here. The <section> is the main element that will display the image, in the style sheet we set the dimensions and also a starting image.

section {
	width:900px;
	height:300px;
	background: transparent url(1.jpg) 0 0 no-repeat;
        }

Select all Open in new window

The “inner-slide” <div> is the second element that we will load the incoming slide onto at runtime. To begin with we need style it with:

#inner-slide{
	width:900px;
	height:300px;
	position:absolute;z-index:1000;	
	}

Select all Open in new window

Finally, we have an unordered list to act as the navigation:

section ul {list-style:none;margin:0;position:absolute;left:0;top:40px;width:800px;z-index:1001}
section ul li a {width:20px;height:20px;background:#fff;border:1px solid #333; margin:10px;float:left;}

Select all Open in new window

The next thing we need to do is to define the CSS animations that we are going to use. For the purposes of this demonstration, we are going to have two animations.

The first is going to bring the new slide in from the right hand side. This is done by setting the background-image for “inner-slide” to the new image, and then animating the background position from “left:900px“ (i.e. just of the right side), to “left:0px”. The second animation will perform a similar function, animating the current slide (i.e. background of <section>) from “left:0px” to “left:-900px” (just of left side). Both these animations will be called in unison, bringing the new image in as the old is exiting.

	@-webkit-keyframes slide-in { from { background-position: 900px  0;} to {background-position:0 0;}}
	@-moz-keyframes slide-in { from { background-position: 900px  0;} to { background-position:0 0;}}
	@-o-keyframes slide-in { from { background-position: 900px  0;} to { background-position:0 0;}}
	@keyframes slide-in { from { background-position: 900px 0;} to {background-position: 0 0;}}

	@-webkit-keyframes slide-out { from { background-position: 0  0;} to {background-position:-900px 0;}}
	@-moz-keyframes slide-out { from { background-position: 0 0;} to {background-position: -900px 0;}}
	@-o-keyframes slide-out { from { background-position: 0  0;} to {background-position:-900px 0;}}
	@keyframes slide-out { from { background-position: 0 0;} to {background-position: -900px 0;}}

Select all Open in new window

Once defined, we then assign the animation to a new class, together with information regarding how long the animation will last, a timing function (that specifies the rate of animation) and also the delay before it begins. The syntax, for this is as follows:
animation: name duration timing-function delay iteration-count direction;
Using the above, we define the following two classes:

	.in {
		-webkit-animation: slide-in 2s linear 0s;
		-moz-animation: slide-in 2s linear 0s;
		-o-animation: slide-in 2s linear 0s;
		animation: slide-in 2s linear 0s;
	}
	.out {
		-webkit-animation: slide-out 2s linear;
		-moz-animation: slide-out 2s linear;
		-o-animation: slide-out 2s linear;
		animation: slide-out 2s linear;
	}

Select all Open in new window

The final bit of css we need to include, places each of the slider images into a new class, so that they can be called when needed:

.back1 { background-image:url(1.jpg);background-repeat:no-repeat}
.back2 { background-image:url(2.jpg);background-repeat:no-repeat}
.back3 { background-image:url(3.jpg);background-repeat:no-repeat}
.back4 { background-image:url(4.jpg);background-repeat:no-repeat}

Select all Open in new window

Now, all we need to do to complete the slider is to apply these classes to the respective elements at run time, and they will animate into place. To do this, we need to call the javascript function moveslider() when the user clicks on the different list elements. This function looks like this:

var toggle=0;
var current=1;
function moveslider(x){
	if(toggle==0){
		document.getElementById('slider').className='back'+current+' out';
		document.getElementById('inner-slide').className='back'+x+' in';
		document.getElementById('inner-slide').style.backgroundPosition="0 0";
		toggle=1;
	}else{
		document.getElementById('inner-slide').className='back'+current+' out';
		document.getElementById('slider').className='back'+(x)+' in';
		document.getElementById('inner-slide').style.backgroundPosition="900px 0";
		toggle=0;
	    }
	   current=x;
	}

Select all Open in new window

A couple of points about this function, we change the classes of <section> and <div id=”inner-slide”> using the getElementById() and setting className(). Through changing the classes of these items, we initiate the animations between slides.

I have opted to use a toggle type function; this effectively begins by moving the first slide of the page and bringing the second one on. Then, the second time the function runs, it moves the first slide onto the page and the second off. It strikes me that this is a little cumbersome, however, it’s the only way I could get it to work (I'm sure someone can suggest an improvement to this). I also found that I need to explicitly set the background position again after the animations were completed; I was finding the incorrect slide was showing every other cycle if I didn’t set this explicitly.

As I mentioned, this is all quite new to me, therefore if anyone has any improvements / suggestions please let me know. As far as im aware, this should degrade graciously, as if the animation is not supported, then the click event of the anchor tag will simply load the image in without the effect.

This article on on 24ways.org was one of many that gave me the idea to write this article: http://24ways.org/2012/giving-css-animations-and-transitions-their-place/?utm_source=CSS+Weekly&utm_campaign=CSS_Weekly_Issue_37&utm_medium=web

You can see a working demo of the above slider here:
http://www.suremedia.co.uk/css-slider/index.htm