Databases
StackOverflow2013
Postsdbo
POcustom pager in jquery bxslider plugin
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcustom pager in jquery bxslider plugin
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload