Creating a pure CSS content slider

Creating a pure CSS content slider

A simple content slider. No javascript. No flash. Just HTML and CSS3. Oh, and a bit of BMC.

When I was redesigning the homepage for this site, I really wanted to include a simple content slider that would integrate easily with the wikidot syntax and allow the content of the slides to be changed without much thought required, and possibly even automatically with the ListPages module. I have tried getting many javascript and jQuery sliders to work with wikidot, but the amount of time required to get them working properly, and their lack of integration with other parts of the site, put me off them. That, and my very limited knowledge of javascript. So I turned to something I am familiar with, even quite adept at, to create the slider. CSS3. (If you haven’t figured it out yet, the three boxes on the homepage slide to the left if you’re using Safari or Chrome). I know what you’re saying now. CSS3 only works in some browsers! The slider only works in Safari & Chrome! What good is that? Well, read on for my reasoning…

CSS slider preview

So yes, the slider does only work in Safari and Chrome because it uses webkit animations to slide the boxes. But that doesn’t mean it looks like a jumbled-up mess in other browsers. The slider is designed so that even without the animation, it still looks great and incorporates well with the rest of the site. It even looks good in IE6!
When viewed in a non-webkit browser, the user simply sees the first three boxes. When viewed with Safari and Chrome, those first three boxes slide to the left after 25 seconds to reveal another three boxes. This means there is some content on the page that only a limited number of visitors will be able to see, but my reasoning was as follows: the content of the boxes is merely there to promote other parts of the site. There’s nothing in those boxes that is integral to user experience; they’re just glorified links. The animation enhances the user experience for those with modern browsers, as they deserve. And if something important needed to be put in the boxes, I can just place it in the one of the first three - everyone can see those three boxes.
Well, enough explaining myself, lets get on to the juicy stuff…



The Markup

It’s pretty simple really. It consists of a container for the slider, which will fit a maximum of three boxes in at a time, and then a container for each of the six boxes. I have just put images in each of the boxes with a brief caption, but you could just as easily incorporate some styled text, or just about anything else really.

[[div class="slider-container"]]
[[div class="slider-box one"]]
[[image free.png title="Free wikidot themes"]]
+++ [http://css3.wikidot.com/themes:_free Free Wikidot Themes]
[[/div]]
[[div class="slider-box two"]]
Content of box two.
[[/div]]
[[div class="slider-box three"]]
Content of box three.
[[/div]]
[[div class="slider-box four"]]
Content of box four.
[[/div]]
[[div class="slider-box five"]]
Content of box five.
[[/div]]
[[div class="slider-box six"]]
Content of box six.
[[/div]]
[[/div]]

The CSS

So, now for the CSS. First, I needed to create the container that will hold all of the boxes. The most important part in this is setting the overflow to hidden. Everything else is just to position it correctly with the right dimensions.

.slider-container {
    width: 1000px;
    position: absolute;
    left: 0;
    top: 120px;
    height: 236px;
    padding: 10px 0px;
    overflow: hidden;
    margin: 10px auto;
}

Next for the boxes. There's nothing overly important in this. You just need to make sure they are an appropriate width and height for the container.

.slider-box {
    width: 300px;
    height: 220px;
    margin: 0;
    padding: 4px 5px;
    position: absolute;
    display: block;
    border: 4px solid #fff;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2);
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.15)));
}

I then needed to position each of the six boxes. Using absolute positioning (defined above), all I needed to do was set the distance from the left of the container, with a margin between each box. This will mean that without the animation, the first three boxes fix neatly into the container, while the next three are hidden from view, but still in the same line.

.slider-box.one {
    left: 0px;   
}.slider-box.two {
    left: 340px;
}.slider-box.three {
    left: 680px;
}.slider-box.four {
    left: 1020px;
}.slider-box.five {
    left: 1360px;
}.slider-box.six {
    left: 1700px;
}

To make it a bit easier to understand, here’s a wee little diagram I mocked up to represent the slider.

CSS slider overview

Now for the cool part, setting up the animation. I used webkit transforms within the keyframes to slide the boxes the length of the container to the left. I had initially defined the position of each of the boxes within six separate keyframe defintions, but then I realised that by using webkit transforms, the one keyframe sequence can be applied to all six boxes. The 10 second delay is to give the page time to load before beginning the animation. Without it, I found that in some cases the animation could start for some boxes before others, which ended with boxes all over the place.

@-webkit-keyframes slider {
0% {
    -webkit-transform: translate(0px, 0);
} 
45% {
    -webkit-transform: translate(0px, 0);
}
55% {
    -webkit-transform: translate(-1020px, 0);
}
100% {
    -webkit-transform: translate(-1020px, 0);
}
}
.slider-box {
    -webkit-animation-name: slider; 
    -webkit-animation-duration: 15s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 10s;
}

Unfortunately, since they removed -webkit-animation-play-state from the webkit engine, there is no way for the user to interact with the slider, such as pausing it on hover. I'm not entirely sure why they removed it, but I would really like them to put it back! It would make this slider complete.

The rest of the the code is just to do with positioning of the images and captions, and setting the entire box as a link. You can see all of the code here.

Conclusion

So there we have it, a pure CSS content slider. While it may not be as beautiful or feature rich as its javascript alternative, there is something to be said for its simplicity, both in the slider itself and the code that makes it happen. I'd be interested to know your thoughts on using these sorts of CSS3 techniques in websites today.


Enjoy the article? Tweet it!

Discussion - No comments yet…3 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.