title: custom pager in jquery bxslider plugin
body: <p>I'm having an issue with jQuery and I don't really know where to start.</p>
  
  <p>Basically I am using the <a href="http://bxslider.com/" rel="nofollow">bxslider plugin</a> to make a carousel.</p>
  
  <p>Here is simplified HTML:</p>
  
  <pre><code>&lt;ul id="promos"&gt;
      &lt;li&gt;
          &lt;h2&gt;Event Title 1&lt;/h2&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;h2&gt;Event Title 2&lt;/h2&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the jquery :</p>
  
  <pre><code>$('ul#promos').after('&lt;div id="pager1"&gt;&lt;/div&gt;');
  $('ul#promos').bxSlider({
      displaySlideQty: 1,
      moveSlideQty: 1,
      infiniteLoop: false,
      controls: false, 
      pager: true,
      pagerSelector: '#pager1',
      auto: true,
      pause: 5000,
      speed: 1000
  });
  </code></pre>
  
  <p>This renders the output as:</p>
  
  <pre><code>&lt;ul id="promos"&gt;
      &lt;li&gt;
          &lt;h2&gt;Event Title 1&lt;/h2&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;h2&gt;Event Title 2&lt;/h2&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="pager1"&gt;
      &lt;a href="" class="pager-link pager-1 pager-active"&gt;1&lt;/a&gt;
      &lt;a href="" class="pager-link pager-2"&gt;2&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I want the pager to use the relative h2 titles, rather then ascending numbers. So ideally it would look like:</p>
  
  <pre><code>&lt;div id="pager1"&gt;
      &lt;a href="" class="pager-link pager-1 pager-active"&gt;Event Title 1&lt;/a&gt;
      &lt;a href="" class="pager-link pager-2"&gt;Event Title 2&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: there can be up to six events in this carousel.</p>
  
  <p>Here is an example:
  <a href="http://jsfiddle.net/adrianjacob/gHpBT/3/" rel="nofollow">http://jsfiddle.net/adrianjacob/gHpBT/3/</a></p>
  
  <p>Any pointers where to start would be much appreciated.</p>