looper.js plugin - images invisible in between crossfade animations

Question

I've been trying to use looper.js to loop through various words or images inside a div (examples)

Everything seems to work OK except when I use the crossfade animation option (class="xfade"). The content appears only during animations, and is otherwise invisible.

This is fixed by commenting out position: relative in .looper .looper-inner:

.looper .looper-inner {
  overflow: hidden;
  width: 100%;
  height: auto;
  /*position: relative;*/
  z-index: 2;
}

BUT it is not an acceptable solution since it messes up my responsive layout on mobile.

I guess it must be a noob mistake on my part since I'm using default official examples...

DEMO: jsfiddle

Thank you for your help.

A solution has been found on looper's Github page: github.com/rygine/looper Hope this helps. — user3491096

SpidrJeru SpidrJeru · Accepted Answer · 2014-03-22T16:10:46

It seems like this looper plugin is not very stable, and the support on it is far from excellent. I ended up using this other plugin called Cycle2, which is more popular and highly customisable.

Cycle2 comes with many fancy transitions, but feel free to check out Cycle for other more traditional transitions.

EDIT: Concerning looper.js, the solution was to specified the height of .looper .looper-inner for every single animation class you're using (default is 100%).

looper.js plugin - images invisible in between crossfade animations

1 Answers