Next steps with Performer
Adding the Performer HTML
So now we need to modify the HTML of the page for each of the Performer functions we'll be using. There's a page dedicated to each function
Step 2: Modifying the articles to use Looper
The first thing to do is put all four articles on the page in a list, like this:
<ul id="adverts" class="inline looper"> <li><a href="article1.html"><img src="images/article1.jpg" alt="Article 1" /></a></li> <li><a href="article2.html"><img src="images/article2.jpg" alt="Article 2" /></a></li> <li><a href="article3.html"><img src="images/article3.jpg" alt="Article 3" /></a></li> <li><a href="article4.html"><img src="images/article4.jpg" alt="Article 4" /></a></li> </ul>
You'll see I've given the list a CSS class of
looper, as it is an element of whch we're going to loop the contents. There's no need to do anything else to this, as the
Looper function will automatically loop through all children of this element (in this case the
<li> elements, but it could be anything).
Now we need to add our links to loop the articles. They look like this:
<p><a href="#" class="looperback targetEl-adverts">< Previous</a> <a href="#" class="looperforward targetEl-adverts">Next ></a></p>
You should be able to loop through the article images using the 'Previous' and 'Next' links. Go to step 3....