Daryll Doyle WordPress Development and Consultancy in Cornwall

Pure CSS Image Slider


Recently I’ve became more and more interested in CSS3 use on the web. This interest stems from the fact that more and more people are moving from using JavaScript to manipulate items on the the DOM to using CSS3 Keyframe animations and Transforms.

Up until now, I have only used CSS3 for nth-child selectors and other little bits, mainly leaning back on JavaScript to do the heavy lifting. Today, after reading around, I decided to attempt to create a pure CSS image slider. As an object of webpages that I use often, I know how I like mine to work, which should allow me to get it as good as I can.

I used Codepen to mock up this demo, the code you can see below!

See the Pen Pure CSS Slider by Daryll Doyle (@darylldoyle) on CodePen.

One of the major issues I ran into was the fact that I needed to fix the amount of slides as to calculate the percentages used in the keyframes animation. I’d have liked to overcome this, by passing a variable to either the keyframe declaration, or by creating a custom keyframe animation per slider inside the slider mixin. As far as I can see, neither of these options are currently implemented so I’m a bit out of luck there, if you can think of another way in the meantime, drop me an email, or drop a comment on this post!

About the author

Daryll Doyle

Daryll is a Lead Web Engineer at 10up.

He is the original author of the SVG sanitisation plugin Safe SVG, which has over 500,000 installs from the WordPress.org plugin directory and is now maintained by 10up.

He has also spoken publicly about SVGs and WordPress, including a talk at WordCamp London 2018.

In his spare time he enjoys spending time with his family and researching Developer Experience.

Add comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Daryll Doyle WordPress Development and Consultancy in Cornwall