Adding Looping to a Content Slider

A few days ago I came across the wonderfully magnificent easySlider jQuery plugin. It makes sliding content vertically or horizontal drop dead simple using totally natural markup and CSS. I immediately worked it into the design of ~/bin (this animation was in my original design on paper) and it worked flawlessly. However, like the plugin’s title implies, it was and is meant to be simple and therefore lacks some features in order to gain ease of use.

I took some time to become more fluent in jQuery, and add some enhancements by modifying the plugin. One of those enhancements was looping, and is the topic of this article. I had no prior experience working with these types of galleries and implementing looping seemed like a fun idea. So here was the result of my tinkering:

How Do You Implement Looping?

Give yourself a minute to get creative. Develop some ideas and strategies on how you would take the following markup for the slides, and make it loop.

<div id="slider">
  <ul>
    <li>content here...</li>
    <li>content here...</li>
    <li>content here...</li>
  </ul>
</div>

I came up with two strategies that use a similar technique to implement the loops. The above loop is an implementation of one of these strategies, but I wanted to compare and contrast my two versions here, and hopefully get some reader feedback on different techniques!

Hidden Moves Strategy

This strategy actually involves physically moving unseen slides around in the DOM. By moving the slides in such a way that there is always the proper “next slide” and looping can continue forever in either direction without errors.

Hidden Moves Strategy

Instantaneous Jumps between Clones Strategy

This strategy actually involves cloning the first slide and adding it to the end of the list. This now makes the first and last slides exactly the same. When we need to handling transitions to and from these slides we can instantly jump between them, and the user is none the wiser.

Instantaneous Jumps Between Clones

Comparing the Pros and Cons of Each

Hidden Moves:

  • Requires no extra space (in theory).

  • Simple to implement moves. 1 line executed as a callback on “next” and before the transition if “prev”

  • Expensive. Requires moving slides on every transition. This is actual DOM manipulation. Sure in nearly all cases this is negligible but it could be a pain for large, complex slides.

  • Wouldn’t work on looping a single slide. Kinda useless though right?

  • Does it work? By taking a slide off of the front won’t everything shift? Yes, this could get tricky, I honestly haven’t tried it.

Instant Jumps:

  • Requires extra space to duplicate the first slide.

  • Simple to clone a slide. 1 line of jQuery.

  • 1 time cost to clone, never again is there a DOM Manipulation cost.

  • Has the ability to loop on a single slide.

  • Tricky code to handle when to jump. Nothing difficult, just messy.

  • Does it work? Yes, Its what I’m using above..

Thats it for my analysis. Do you have any suggestions?

search