Bare Bones Slider

Bare Bones Slider is a minimalistic jQuery slider that is very flexible. The main strength of the plugin isn't what it does, it's what it doesn't do. Other jQuery sliders have a lot of default functionality; this one has very little. This allows developers to build their own functionality on top of this plugin instead of wasting time trying to undo the plugin's "helpful" features.

Tags

  • jQuery Plugin

Case Studies

CSS Transitions and Resets

The initial release of this plugin used jQuery's animate function for its animations. Eventually, I added CSS transitions instead for better hardware acceleration.

One big hurdle was that the slider needed to position the next slide before animating it. Previously, I could position the element with the css function and animate it with the animate function. Attempting to achieve this with the transition property in CSS produced some weird results.

Initially, I tried to add a class that had transition:none, position the element, remove the class which should have re-enabled animations, and apply the final coordinates. The actual result was that the element animated from out of unexpected places.

After a bit a research, I realized that the JavaScript code that was adding and removing the classes was synchronous. It added a class and removed the same class in the same function so it did nothing. Having CSS sandwiched in between to re-position the element didn't trigger a redraw or repaint.

My chosen solution for now is just to separate the reset and animate functions with a setTimeout to make sure the browser doesn't skip over steps. It's not the most elegant solution but it's the simplest until JavaScript comes with proper asynchronous support.