demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Photograph of July 4 fireworks in Austin, Texas Photograph of the Taj Mahal reflected in water Photograph of a girl on the shores of Ibiza Photograph of Ankor Wat at sunrise Photograph of July 4 fireworks in Austin, Texas

Make A Responsive CSS3 Image Slider

mobile / responsive design

Estimated reading time: 3 minutes

Previously, I’ve demonstrated how to make a fixed-width CSS image slider. Increasingly, web developers desire solutions that not only scale across viewport sizes, but perform well on devices. The detailed here is particularly well-suited to those goals, as it avoids entirely, running purely in (and thus faster, smoother, and with less overhead).

The idea is very similar to the previous example: an “imagestrip” containing all the photographs of our slider moving inside a window element which works to restrict the visibility of elements outside it. For this example, you’ll need four images, although in practice you could make a strip with as many images as you wished. The sole condition is that all the images must be exactly the same size.

Create A Responsive Frame With An Imagestrip

First, we need to make the outer slider element responsive. We do this by building :

<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>

(I’m leaving the alt attribute blank to save on space; in production, it would be filled out appropriately for and purposes). Note that the same image is placed at the start and end of the strip, allowing the animation we will build to repeat in a smooth loop.

The window is given a width of 80% to make it responsive, and a max-width that corresponds to the natural width of an individual image (1000px, in the case of the example), as we don’t want to make any image larger than it naturally is:

div#slider { width: 80%; max-width: 1000px; }

In our CSS, the width of the figure is described as a percentage multiplier of the div that contains it. That is, if imagestrip contains five images, and the final div shows just one, the figure is 5x wider, or 500% the width of the container div:

div#slider figure {
position: relative; width: 500%;
margin: 0; padding: 0; font-size: 0; text-align: left;
}

The font-size: 0 sucks all the air out of the figure element, removing the space around and between the images. position: relative allows the figure to be moved easily during the animation. text-align: left; is in place due to a weird bug in Safari 5 for Windows.

We have to evenly divide the photographs inside the imagestrip. The math is very simple: if we consider the figure element to be 100% wide, each image needs to take up ⅕ of the horizontal space:

100% / 5 = 20%

Which leads to the following CSS declaration:

figure#imagestrip img { width: 20%; height: auto; float: left; }

(Again, the float: left; is in place to address a bug in Win Safari 5).

Finally, we hide the overflow of the div:

div#slider { width: 80%; max-width: 1000px; overflow: hidden }

Animate The Strip

Finally, we have to get the imagestrip moving from left to right. If the containing div is 100% wide, then each movement of the imagestrip to the left will be measured in increments of that distance:

@keyframes slidy { 
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; } 
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; } 
}

Each image in the slider will stay framed in the div for 20% of the total length of the animation, and move for 5%.

We have to call on the animation to get things started. (Code is shown without vendor prefixes in order to save on space.)

div#slider figure {
position: relative; width: 500%;
margin: 0; padding: 0; font-size: 0; left: 0; text-align: left;
animation: 30s slidy infinite;  
}

As you can see, making a responsive slider is in many ways easier than making a fixed one.

Images by the always-excellent Trey Radcliff, used with permission.

Play with this code on CodePen
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.