Daryll Doyle WordPress Development and Consultancy in Cornwall

Pure CSS Image Slider

P

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

Daryll is a WordPress developer, currently building themes and plugins for Built by Cactus.

In his spare time, he works on his SVG sanitisation plugin Safe SVG, that currently has over 100,000 installs from the WordPress.org plugin directory.

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

Add comment

Leave a Reply

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

Daryll Doyle WordPress Development and Consultancy in Cornwall