<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Creating your own CSS3 Slider

Published on
8,744 Points
2,644 Views
1 Endorsement
Last Modified:
Approved
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>

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;
        }

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;	
	}

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;}

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;}}

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;
	}

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}

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;
	}

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
1
Comment
Author:Dean OBrien
0 Comments

Featured Post

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Join & Write a Comment

In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Next Article:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month