title: jQuery Cycle Custom Navigation
body: <p>Using the jQuery Cycle plugin to create a slideshow of content (not pictures) - how would i make the below code work?</p>
  
  <p>This is my slideshow content:</p>
  
  <pre><code>        &lt;div id="slideshow"&gt;
              &lt;div&gt;
                  &lt;h1&gt;Title One&lt;/h1&gt;
                  &lt;p&gt;Description for title one&lt;/p&gt;         
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;h1&gt;Title two&lt;/h1&gt;
                  &lt;p&gt;Description for title two&lt;/p&gt;         
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;h1&gt;Title Three&lt;/h1&gt;
                  &lt;p&gt;Description for title three&lt;/p&gt;         
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;h1&gt;Title Four&lt;/h1&gt;
                  &lt;p&gt;Description for title four&lt;/p&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And this is the custom nav below: </p>
  
  <pre><code>        &lt;div id="slideshow-nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="thumb one"&gt;&lt;/span&gt;
                          &lt;span class="title"&gt;One&lt;/span&gt;
                          &lt;span class="desc"&gt;Desc one&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="thumb two"&gt;&lt;/span&gt;
                          &lt;span class="title"&gt;Two&lt;/span&gt;
                          &lt;span class="desc"&gt;Desc two&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="thumb three"&gt;&lt;/span&gt;
                          &lt;span class="title"&gt;three&lt;/span&gt;
                          &lt;span class="desc"&gt;Desc three&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="last"&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="thumb four"&gt;&lt;/span&gt;
                          &lt;span class="title"&gt;Four&lt;/span&gt;
                          &lt;span class="desc"&gt;Desc Four&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Obviously i want the anchor links in the nav to correspond to the right slide above. I'd also like an "active" class added to the current selected nav if thats possible?</p>
  
  <p>As an example, Brightcove (http://www.brightcove.com/en/) do more or less what i'm trying to achieve on there slideshow. </p>
  
  <p>Thanks</p>