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....

Pages: 1 2 3 4 5 6 7 8