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!

WordPress Plugin Development

A few weeks ago I was commissioned to create a WordPress plugin for a client. This plugin needed to take a feed on news from my clients website and display it on their clients dashboards.

After a few searches of the WordPress directory, I couldn’t find anything suitable, to either use as as a complete tool, or as a base top develop on top of. As such, I decided that learning the basics of WordPress plugin development couldn’t be a bad thing. After all, I make my living developing websites and a large proportion of that is now WordPress sites.

After reading a few tutorials (One, Two, Three, Four) I managed to knock together an admin plugin to create a custom post type and a client plugin to read a JSON feed of the custom post type, into a widget on the dashboard. This was alright and worked for my client but I realised that there was still a whole in the WordPress directory for plugins to do this. This is when I decided that I’d re-write the plugins and publish them in the WordPress directory.

I played around a bit and seemed to spend a lot of time on Stackoverflow researching the best practices of plugin design. In the end, I went with two OOP plugins. Again, one for the admin side, this time with a settings menu, letting you choose how many posts to show to your clients and the name that will show up on the dashboard widget:

screenshot-1

and also one for the client side. This has a settings menu allowing you to point the request at your parent site, supplying the feed!

screenshot-1

Below is the widget on a test dashboard:

screenshot-2

 

Although fairly simple, I feel it’s taught me a fair bit about plugin development and has allowed me to progress my WordPress knowledge, something I know I can always improve upon.

For anyone that’s wondering, you can find the Admin plugin at: https://wordpress.org/plugins/dashboard-custom-feed-admin/  and I will update this post with the client side plugin as soon as it’s through review and into the WordPress directory here is the client plugin https://wordpress.org/plugins/dashboard-custom-feed/.