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 CSS (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 HTML:

<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 accessibility and SEO 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:

div#slider figure 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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/ehKpi