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 mobile devices. The responsive solution detailed here is particularly well-suited to those goals, as it avoids JavaScript entirely, running purely in CSS3 (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

First, we need to make the window element responsive. We do this by inserting a copy of one of the images from the slider inside the element, and setting an appropriate inline style:

1. <div id="window">
2. <img src="austin-fireworks.jpg" alt=""
3. style="max-width: 100%;">
4. </div>

(I’m leaving the alt attribute blank to save on space; in production, it would be filled out appropriately for accessibility and SEO purposes).

The window is given a max-width that corresponds to the natural width of the image (1000px, in the case of the example), as we don’t want to show more of the imagestrip than one image. All images are floated left to remove space at the bottom of their containers.

1. div#window { max-width: 1000px;
2. position: relative; overflow: hidden; }
3. img { float: left; }

Design a Strip of Images

With the placeholder image added, we can create the interior imagestrip. This will immediately obscure the placeholder, but that’s okay: the sole purpose of the placeholder is to make the window responsive; it doesn’t need to be visible.

Our HTML becomes:

1. <div id="window">
2. <img src="austin-fireworks.jpg" alt=""
3. style="max-width: 100%;">
4. <figure id="imagestrip">
5. <img src="austin-fireworks.jpg" alt="">
6. <img src="taj-mahal.jpg" alt="">
7. <img src="ibiza.jpg" alt="">
8. <img src="ankor-wat.jpg" alt="">
9. <img src="austin-fireworks.jpg" alt="">
10. </figure>
11. </div>

Note that the same image is placed at the start and end of the strip, allowing the animation to repeat in a smooth loop.

In our CSS, the width of #window is described as a percentage multiplier of the div that contains it. That is, if imagestrip contains five images, and the div shows just one, the figure is 5x wider, or 500% the width of the container div.  It’s also positioned absolutely, enabling us to describe its position relative to its container.

1. figure#imagestrip {
2. position: absolute; width: 500%; margin: 0;
3. top: 0; left: 0;
4. }

We have to evenly divide the photographs inside the imagestrip. We could use a layout such as flexbox to do so, but the math in standard CSS is very simple. If we consider the figure element to be 100% wide, each image needs to take up 1/5 of the horizontal space:

100% ÷ 5 = 20%

Which leads to the following CSS declaration:

1. figure#imagestrip img { float: left; width: 20%; }

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:

1. @keyframes slidy {
2.       20% { left: 0%; }
3.       25% { left: -100%; }
4.       45% { left: -100%; }
5.       50% { left: -200%; }
6.       70% { left: -200%; }
7.       75% { left: -300%; }
8.       95% { left: -300%; }
9.      100% { left: -400%; } 
10. }

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:

1. figure { position: absolute; width: 500%;
2. margin: 0; top: 0; left: 0;
3. animation: 30s slidy ease-in-out infinite;  }

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

(Both the keyframes and animation code is shown without vendor prefixes in order to save on space – you can resize your browser window to see the effect on the slider. Images by the always-excellent Trey Radcliff, used with permission).