Responsive JQuery rotating images

Sometimes, when I’m in the weeds of a thing – say, figuring out how to build my own custom Javascript solution for rotating images – I wonder if it wouldn’t just be easier to download someone else’s solution and just live with that. But then I figure it out (eventually) and it almost seems worth it at the time.

The real bonus glory (in my mind) only comes later. And, for me, later is today. Today I got my image rotater to work with responsive design: it loads the images (which are all exactly the same size, to make the effect work), and resizes the bounding box (overflow: hidden) with each iteration, so if the viewport resizes, the images rotate in the right place.

It could be better yet – I could actually be resizing as soon as the viewport width changes, but since the rotater is already handling the image change event, that seemed like an easy (and perhaps elegant) place to put the resize logic.

But, more to the point, I feel like having figured out these two things – responsive design and building an image rotater (is “rotater” really a word?) – and then using the knowledge of the one to adapt the other is the icing on the cake.

Knowledge is such an accumulative thing. I have to remind myself that there was a time when I only scratched the surface and struggled through with just a bare understanding. And I know that there is still so much more to learn, but I keep bringing more tools to each project, and each project keeps challenging me and making me better.

I’m so glad I didn’t just download someone else’s script.