Looper documentation

Looper allows you to 'loop' through a list of elements, with options to go to the next, previous, first and last items. You can also set an item other than the first one as the default to show. A looper can only be created from ul or ol elements.

Give the li element you want to be shown by default a CSS class of looperdefault. Otherwise the first item in the list will be shown and all others hidden.

Example

Standard looper

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Move back, Move forward, Move to first, Move to last

Looper with auto-play transitions between each item in a Looper collection after a set number of seconds delay.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Pause animation, Play animation

<ul id="looperlist" class="looper">
	<li>Item 1</li>
	<li>Item 2</li>
	<li class="looperdefault">Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<p><a class="looperback targetEl-looperlist" href="#">Move back</a>, <a class="looperforward targetEl-looperlist" href="#">Move forward</a>, <a class="looperfirst targetEl-looperlist" href="#">Move to first</a>, <a class="looperlast targetEl-looperlist" href="#">Move to last</a></p>
<ul>
<li><a class="looperitem item-0 targetEl-looperlist" href="#">Move to item 1</a></li>
<li><a class="looperitem item-1 targetEl-looperlist" href="#">Move to item 2</a></li>
<li><a class="looperitem item-2 targetEl-looperlist" href="#">Move to item 3</a></li>
<li><a class="looperitem item-3 targetEl-looperlist" href="#">Move to item 4</a></li>
<li><a class="looperitem item-4 targetEl-looperlist" href="#">Move to item 5</a></li>
</ul>

<p>Looper with auto-play transitions between each item in a Looper collection after a set number of seconds delay.</p>
<ul id="looperautolist" class="looper delay-3">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<p><a class="looperpause targetEl-looperautolist" href="#">Pause animation</a>, <a class="looperstart targetEl-looperautolist" href="#">Play animation</a></p>

Settings for Looper elements

Valid elements

An element that has child elements (for example a <ul> that has child <li> elements).

Classname

looper

Attributes

Must have a valid ID attribute.

CSS parameters (what's this?)

delay (optional)
The number of seconds the looper will wait before automatically showing the next item.

Settings for Looper links

Valid elements

a elements (links)

Classname

One of:

  • looperforward to go forward to the next item
  • looperback to go back to the previous item
  • looperfirst to go to the first item
  • looperlast to go to the last item
  • looperitem to go to the item number (zero-based) in the item CSS parameter. For example "looperitem item-2 targetEl-mylooper" will show the third item in the looper with ID 'mylooper'

For Looper element which have a 'delay' CSS parameter, therefore automatically show the next item after a delay, you can also use one of:

  • looperpause pause the animation
  • looperstart play the animation from the current item

Attributes

None

CSS parameters (what's this?)

targetEl (required)
Must be set as the id of the ul element containing the items to loop