jquery bxslider插件中的自定义寻呼机

我对jQuery有一个问题，我真的不知道从哪里开始

基本上，我使用的是旋转木马

以下是简化的HTML：

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

活动标题1


活动名称2

以及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#promos'）。在（''）之后；
$（'ul#promos'）.bxSlider({
显示幻灯片数量：1，
移动滑块数量：1，
无穷远：错，
控件：false，
寻呼机：是的，
页面选择器：“#页面1”，
是的，
暂停：5000，
速度：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>

活动标题1


活动名称2

但是，我希望寻呼机使用相对的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>

注意：此旋转木马中最多可以有六个事件

以下是一个例子：

---

如果您能给我指点一下从哪里开始，我将不胜感激。

我通过在

该示例使用“buildPager:”将标准的1,2,3,4寻呼机替换为图像，示例：

$(function(){
  $('#slider1').bxSlider({
    pager: true,
    buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet1_thumb.jpg" /></a>';
        case 1:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet2_thumb.jpg" /></a>';
        case 2:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet3_thumb.jpg" /></a>';
        case 3:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet4_thumb.jpg" /></a>';
      }
    }
  });
});

$（函数（）{
$（'#slider1'）.bxSlider({
寻呼机：是的，
buildPager:函数（slideIndex）{
开关（滑动索引）{
案例0：
返回“”；
案例1：
返回“”；
案例2：
返回“”；
案例3：
返回“”；
}
}
});
});

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

我用的是haml和coffeescript，但你应该明白我的意思

我正在使用自定义寻呼机链接上的数据id属性将该链接绑定到特定幻灯片

哈姆

---

请查看下面的html代码进行分页

jQuery（document）.ready（function（）{
jQuery（'#bxslider1'）.bxSlider({
pagerCustom:“#bxsliderlist1”
});   
});


你的康坦特


你的康坦特


你的康坦特


你的康坦特




你的康坦特


你的康坦特


你的康坦特


你的康坦特

关于如何将寻呼机的活动状态作为目标以生成不同的图像，您有什么想法吗？
%ul.landing-links
  %li <a href="#" data-id="0" class="active">Slide One</a>
  %li <a href="#" data-id="1">Slide Two</a>

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