A responsive image slider without Javascript

I had a job recently putting together yet another site  designed by a very good graphic artist who knew nothing about web.  First thing she did was put a great fat image slider at the top of the page so that no-one would be able to see any content above the fold, and even if they did, their attention would be continually grabbed by the next moving image.

It turned out, once I really did a use case study with the target market in mind, that she was right.  The target market (I can’t reveal the site yet) need lots of  photos, but the the site had been sold as responsive.  The 6 images in the header weighed in at about 300kB each, the Javascript to run it was another 200kB, and 85% of the mobile viewers would be seriously put off by the long wait for it all to arrive and would never visit the site again.

What about background images, I thought, and once thought, it wouldn’t go away.  I borrowed some code from

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3

tweaked it and simplified it and came up with

http://webconsultant.co.nz/goodstuff/slider or http://is.gd/syslider

which I reckon is pretty cool if I say so myself.  The images are all background images in an unordered list, and with media queries I am able to call on a different folder of different sized images for each breakpoint.

The media query breakpoints have become my default boilerplate set up. Grab the source code and have some fun.

Next job: SImplify the process with a bit of server side coding to  write the CSS  using the images from one folder ….