jquery - jquery bxslider 插件中的自定义分页器

Question

我在使用 jQuery 时遇到问题，但我真的不知道从哪里开始。

基本上我正在使用 bxslider plugin制作一个轮播。

这是简化的 HTML:

<ul id="promos">
    <li>
        <h2>Event Title 1</h2>
    </li>
    <li>
        <h2>Event Title 2</h2>
    </li>
</ul>

还有 jquery:

$('ul#promos').after('<div id="pager1"></div>');
$('ul#promos').bxSlider({
    displaySlideQty: 1,
    moveSlideQty: 1,
    infiniteLoop: false,
    controls: false, 
    pager: true,
    pagerSelector: '#pager1',
    auto: true,
    pause: 5000,
    speed: 1000
});

这将输出呈现为:

<ul id="promos">
    <li>
        <h2>Event Title 1</h2>
    </li>
    <li>
        <h2>Event Title 2</h2>
    </li>
</ul>
<div id="pager1">
    <a href="" class="pager-link pager-1 pager-active">1</a>
    <a href="" class="pager-link pager-2">2</a>
</div>

但是，我希望寻呼机使用相对的 h2 标题，而不是升序数字。所以理想情况下它看起来像:

<div id="pager1">
    <a href="" class="pager-link pager-1 pager-active">Event Title 1</a>
    <a href="" class="pager-link pager-2">Event Title 2</a>
</div>

注意:此轮播中最多可以有六个事件。

这是一个例子: http://jsfiddle.net/adrianjacob/gHpBT/3/

任何从哪里开始的指示将不胜感激。

Answer 1

我刚刚使用 bxSlider 回调和公共(public)方法构建了自己的寻呼机。

我正在使用 haml 和 Coffeescript，但你应该明白了。

我在自定义分页器链接上使用 data-id 属性将该链接绑定(bind)到特定幻灯片

HAML

%ul.landing-links
  %li <a href="#" data-id="0" class="active">Slide One</a>
  %li <a href="#" data-id="1">Slide Two</a>

CoffeeScript

landing_slides = $("#landing-slides").bxSlider
  controls: false,
  auto: true,
  pause: 10000,
  autoHover: true,
  onAfterSlide: (num, qty, obj) ->
    # Switch the active class to the corresponding pager link
    $("ul.landing-links li a.active").removeClass("active")
    $("ul.landing-links li a[data-id=#{num}]").addClass("active")

$('ul.landing-links li a').click (e) ->
  e.preventDefault()
  landing_slides.goToSlide($(this).data('id')) # Get the data-id attribute value
  landing_slides.startShow() # This is needed to restart the auto scroll