How to Build a Fully Functional CSS3-Only Content Slider

Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. However, with the advent of CSS3, I will show you how to build one using only CSS.

The result won’t be the most semantic thing to ever be made, but it will be completely functional nonetheless.

CSS3 Slider

Some simple HTML to start with

<div id="content-slider">
		<div id="content">
			
			<div id="content-inner-1">
			<div id="content-inner-2">
			<div id="content-inner-3">
			<div id="content-inner-4">
			<div id="content-inner-5">
			<div id="content-inner-6">
			
			<div id="content-inner">
				<div class="page" id="page1">
					
					<div class="page-info" id="info1">
						<h2>Page 1<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page2">
					
					<div class="page-info" id="info2">
						<h2>Page 2<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page3">
					
					<div class="page-info" id="info3">
						<h2>Page 3<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page4">
					
					<div class="page-info" id="info4">
						<h2>Page 4<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page5">
					
					<div class="page-info" id="info5">
						<h2>Page 5<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page6">
					
					<div class="page-info" id="info6">
						<h2>Page 6<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
			<div>		
		
		<div>
		<div>
		<div>
		<div>
		<div>
		<div>
		
		<div>
		
		<ul id="nav">
			<li class="button" id="button1"><a href="#content-inner-1"><a><li>
			<li class="button" id="button2"><a href="#content-inner-2"><a><li>
			<li class="button" id="button3"><a href="#content-inner-3"><a><li>
			<li class="button" id="button4"><a href="#content-inner-4"><a><li>
			<li class="button" id="button5"><a href="#content-inner-5"><a><li>
			<li class="button" id="button6"><a href="#content-inner-6"><a><li>
		<ul>
	<div>

Granted, that looks scary. Very scary. Remember, this isn’t going to be the most semantic thing on the planet. Now, let me explain.

We have a “content-slider” div, which holds all the content. We’ll just “margin: 0 auto” it and forget about it.

Then, we have two sections: the “content” div and the “nav” ul. The content div is what holds all our pages, and the “nav” ul is what allows us to access different pages.

Now, right inside the “content” div, you’ll notice 6 nested divs: “content-inner-1” through “content-inner-6“. These 6 divs will make all the magic work, and I will explain exactly how later on.

The Magical CSS

#content-slider {
font-family: arial;
width: 640px;
margin: 0 auto;
margin-top: 100px;
}

#content {
overflow: hidden;
width: 640px;
height: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
width:10000px;
height: 480px;
}

.page {
width: 640px;
height: 480px;
float: left;
}

As I said, all we did to the “content-slider” div was center it, and move it 100px from the top of the page.

The “content” div styling is very important. We set its “overflow” to “hidden” – This makes sure that the slides are invisible until they are selected.

Now, the “content-inner” div is what holds all of the pages. That’s the reason it has a width of 10,000px. Normally, javascript would give it the right width, but in this case, we aren’t using Javascript.

The pages have a width and a height, and they’re floated to the left to be side by side.

Now, we have some generic styling. We’ll style the “page-info“, and the “nav“.

.page-info {
height: 90px;
background-color: rgba(99, 99, 99, 0.6);
position: relative;
margin-top: 0px;
bottom: 103px;
color: #dedede;
padding-left: 20px;
padding-top: 10px;
}

.page-info h2 {
font-size: 21px;
margin-bottom: 10px;
margin-top: 0px;
color: #fafafa;
}

.page-text {
font-size: 15px;
}

As you can see, it’s just some simple styling that makes the page info semi-transparent and makes the text legible.

Next, we’ll add some nice CSS3 styling to the buttons.

.button {
float: left;
background: #bababa;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-left: 5px;
margin-right: 5px;
}

.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
box-shadow: inset 0px 0px 2px 2px #d4d4d4;
}

.button:active {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
box-shadow: inset 0px 0px 2px 2px #7a7a7a;
}

.button a {
display: block;
width: 16px;
height: 16px;
}

We made the buttons circles, and gave them inset drop shadows to add some eye candy.

Finally, we’ll add the magic ingredient to the mix. Before that, however, I’ll explain how this is all going to work.

Using the CSS3 :target pseudo-selector, we can style elements that are in the url. For example:

#example {
visibility: hidden;
}

#example:target {
visibility: visible;
}

Now, if we were at a url such as “http://www.example.com/index.html#example, the “:target” styles above would be applied. In this case, the “example” div would be visible.

Using this concept, we can mimic a javascript click function. If the user clicks on a link pointing to “http://www.example.com/index.html#example”, then the styles would be applied to “example”.

In this case, we’ll use “:target” to make our content slider work. When the user clicks on any of the six buttons in the nav, the “content-inner” will slide to the appropriate position, much like with a javascript version.

Here’s the code:

#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3200px;
}

Conclusion

We have 6 “content-inner-[number]” divs, and each div corresponds to a page. 6 pages is 6 divs.

The “content-inner” div is a child of each “content-inner-[number]” div, so when any 6 of these “content-inner-[number]” divs are :targeted, we can style the “content-inner” div accordingly.

Since each page is 640px wide, we simply set the margin-left of the “content-inner” div to a multiple of 640.

To make these “:target” styles work, we have to have links pointing to them. Hence, the “nav” ul underneath the pages.

In order to actually animate the “content-inner“, we give it the usual CSS3 animation properties, with vendor prefixes, of course.

Well, there you have it: A fully functional, albeit non-semantic, content slider.

(8 Posts)

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.

Comments

  • Cool – really interesting solution, but falls victim to the back/forward through your image viewing history before returning to the page before/after!

    Awesome achievement nonetheless

  • Just because you can, does not mean you should.

  • PeHaa

    Brilliant idea behind that. Thanks a lot.

  • Haha, Irving’s comment cracked me up. This is impressive, don’t get me wrong, but I think I’ll wait until the technology is a bit more developed. The future of CSS is exciting stuff.

  • Actually I think this idea is pretty useful. You won’t use it as replacement for js but you can use it for mobile sites, for example, saving some bytes and processing power.
    []’s

  • Dan

    Pretty cool stuff, but I’d stick to the semantics of JS for now.

  • Zhaorongjiao Cuc

    既然兼容性有问题,为什么还要这么多想法,究竟在什么地方可用?是不是完全鄙视了IE

  • I agreen with Irving below, whilst this is useful from a technical point of view as an example of what can be done with CSS, the complication of the html is a good pointer that perhaps this isn’t the best way to do it. The point about using it on mobile sites is a bit moot – if bytes and processing power are a real problem then disable the javascript for mobile devices, or serve a different version of the page to them.

    Making a decision to use this code to suit a minority of mobile users would be a mistake.

  • Look like nivo slider, but that is cool…

  • This looks like a great tutorial, however the HTML code just below “Some simple HTML to start with” uses excessive HTML entities which can be extremely confusing for those who don’t know how to undo this. Just wanted to point that out to you. 

  • Terry

    Great! The only example i found so far which is simple and clear and has deep linking capacity so it can be used for actual page navigation!

  • citystrolch

    Hi dan, as I want to use this expample for sliding contents instead of an image gallery:
    do you have a better example which allows me to deep link and animate so easily? I want the deep linking and other examples, which are cool too, don’t seem to work that easy. I know there are ways to do the same whith js, but if I want to use the browser history and links for google directly to my pages this seems much easier a solution.

  • thm

    nice tutorial.
     

  • alex_step

    When browser window has scroll on press on button to slide browser window srcoll to top slider element, it very bad when slider is no it top of page, spent 5 hours, can not correct it:(

    Can you help? Sory for bad English.

  • Harry

    Hello, very cool tutorial. Exactly what I needed for my website, because I have no skills in Java. But there is a question: Is it possible to highlight the actual “navigation buttons” below the contentz to idicate which page is actually loaded. I tried it with the target and another aim for it but it won’t work.

    Can you help me?
    Thank you

  • Great concept, but it seems that none of the demos on this site exist. I’ve opened 4 different demo pages and gotten 404 errors…