How to Build a Fully Functional CSS3-Only Content Slider

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.