Bare Bones Slider is a jQuery slider that is built for developers. Features include carousels, custom mask animations, and easily accessible public methods.

Tags

  • jQuery Plugin
A jQuery minimalist slider
Bare Bones Slider

A jQuery minimalist slider

There are a lot of jQuery slider plugins out there. Each one has a lot of features built in. This is great for beginners who just want a plug-and-play slider plugin. However, problems arise when the design gets complex and the plugin's elements don't match your designer's vision.

Bare Bones Slider is a jQuery slider for developers. The biggest strength of this slider isn't what it does; it's what it doesn't do. By default, all extra elements are off; developers can add new functionality without having to undo the plugin's "helpful" features. Beginners can use pre-coded options, while experts can control it using public methods.

Triggering CSS3 transitions manually

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 jQuery's css function and animate it with jQuery's animate function. Attempting to achieve this with the transition property in CSS3 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.

Other Web Development Projects

Role Play Gamebooks
Asia Standard Americas
Bare Bones Slider
The Pacific by Grosvenor
White Spot Restaurants
Galpop Image Gallery
10net Managed Solutions
Calm Air International
Manning Elliott
Yum Skincare
Lava Lamp