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 Doyle

Daryll is a Staff Engineer at 10up.

With a deep passion for web development and open-source technology, Daryll is the original author of the SVG sanitization plugin Safe SVG, which boasts over 900,000 installs from the WordPress.org plugin directory and is now proudly maintained by 10up.

Throughout his career, Daryll has demonstrated expertise in SVGs and WordPress, sharing his knowledge through public speaking engagements, including a notable talk at WordCamp London 2018.

Beyond his professional life, Daryll enjoys spending quality time with his family and diving into research on Developer Experience, constantly seeking ways to improve the workflow and productivity of fellow developers.

Add comment

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

Daryll Doyle WordPress Development and Consultancy in Cornwall