attention to detail

I had recently seen flexslider when our designer asked for a recommendation on a slideshow plugin to use on some pages he was prototyping.

as we got closer to production pages based on those prototypes, we noticed a flash when the slideshow is initialized, with the “slide” animation and “animation loop” options are specified.

that combination results in a “carousel” or “infinite loop” behavior, where the next slide always appears from the left or right, with a previous or next movement, respectively. example slideshow with flexslider and those options.

flexslider’s approach to achieve this is clever. with a slideshow of three elements:

<div class="flexslider">
    <ul class="slides">
        <li><img src="http://media.danmarvelo.us/31491.jpg" /></li>
        <li><img src="http://media.danmarvelo.us/31461.jpg" /></li>
        <li><img src="http://media.danmarvelo.us/31471.jpg" /></li>
    </ul>
</div>

the containing <ul> is styled such that the first element is visible:

+-----------+-----------+-----------+
            | \           \         |           |
            |  +-----------+        |           |
            |  |           |  2     |     3     |
            |  |           |        |           |
            |  |     1     |        |           |
            +--|           |--------+-----------+
              \|           |
               +-----------+

when initialized with those options, copies of the first and last slides are added.

<div class="flexslider">
    <ul class="slides">
        <li><img src="http://media.danmarvelo.us/31471.jpg" /></li>
        <li><img src="http://media.danmarvelo.us/31491.jpg" /></li>
        <li><img src="http://media.danmarvelo.us/31461.jpg" /></li>
        <li><img src="http://media.danmarvelo.us/31471.jpg" /></li>
        <li><img src="http://media.danmarvelo.us/31491.jpg" /></li>
    </ul>
</div>
+-----------+-----------+-----------+-----------+-----------+
            | \           \         |           |           |           |
            |  +-----------+        |           |           |           |
            |  |           |  1     |     2     |     3     |  1(copy)  |
            |  |           |        |           |           |           |
            |  |  3(copy   |        |           |           |           |
            +--|           |--------+-----------+-----------+-----------+
              \|           |
               +-----------+

then styles on the <ul> are modified so the first slide is visible:

+-----------+-----------+-----------+-----------+-----------+
|           | \           \         |           |           |
|    <--    |  +-----------+        |           |           |
|  3(copy)  |  |           |  2     |     3     |  1(copy)  |
|           |  |           |        |           |           |
|           |  |     1     |        |           |           |
+-----------+--|           |--------+-----------+-----------+
              \|           |
               +-----------+

(hint: that’s where the visible flash comes in.)

when the last slide is visible,

+-----------+-----------+-----------+
|           | \           \         |
|           |  +-----------+        |
|     2     |  |           |1(copy) |
|           |  |           |        |
|           |  |     3     |        |
+-----------+--|           |--------+
              \|           |
               +-----------+

and moving to first the slide, the copy of the first slide comes in to view:

<----
+-----------+-----------+
|           | \           \
|           |  +-----------+
|     3     |  |           |
|           |  |           |
|           |  |  1(copy)  |
+-----------+--|           |
              \|           |
               +-----------+

after the animation is finished, the styles of the <ul> are reset so the original last slide is visible.

+-----------+-----------+-----------+-----------+-----------+
|           | \           \         |           |           |
|    <--    |  +-----------+        |           |           |
|  3(copy)  |  |           |  2     |     3     |  1(copy)  |
|           |  |           |        |           |           |
|           |  |     1     |        |           |           |
+-----------+--|           |--------+-----------+-----------+
              \|           |
               +-----------+

even if the flash while the slides are arranging initially is tolerable, accomodating those extra slides is cumbersome in code.

my initial attempts to modify the flexslider plugin led me to look for a plugin that made less implementation decisions.

like Mr. Wunsch’s jquery-renewal. from his post about it:

jquery-renewal provides enough to make just the kind of carousel you want. It tries to be as lightweight as possible, providing a very simple API for moving through the elements.

(slide diagrams here based on jquery-renewal’s readme.)

a fork of jquery-renewal implements the “infinite loop” using the same element copy approach. example slideshow using that fork of jquery-renewal.

and produces the same flash upon initialize. I think achieving the approach without cloning html elements could help.

when the the last item is visible,

+-----------+-----------+
|           | \           \
|           |  +-----------+
|     2     |  |           |
|           |  |           |
|           |  |     3     |
+-----------+--|           |
              \|           |
               +-----------+

and the moving to the first element, first create space through padding for the element to the right.

+-----------+-----------+-----------+
|           | \           \         |
|           |  +-----------+        |
|     2     |  |           |padding |
|           |  |           |        |
|           |  |     3     |        |
+-----------+--|           |--------+
              \|           |
               +-----------+

move the first slide in to that space though position:absolute:

+-----------+-----------+-----------+
|           | \           \         |
|           |  +-----------+        |
|     2     |  |           |   1    |
|           |  |           |        |
|           |  |     3     |        |
+-----------+--|           |--------+
              \|           |
               +-----------+

slide the first slide to the visible position:

<----
+-----------+-----------+
|           | \           \
|           |  +-----------+
|     3     |  |           |
|           |  |           |
|           |  |     1     |
+-----------+--|           |
              \|           |
               +-----------+

then, as before, reset the styles for the container and first element:

+-----------+-----------+-----------+
            | \           \         |           |
            |  +-----------+        |           |
            |  |           |  2     |     3     |
            |  |           |        |           |
            |  |     1     |        |           |
            +--|           |--------+-----------+
              \|           |
               +-----------+

example slideshow using jquery-renewal with tweaks to allow custom transition styles.

there probably is still a flash, but it’s quick enough to be imperceptible to my eyes.

posted: 02/15/2012