jquery bxslider插件中的自定義尋呼機

Question

我遇到了jQuery的問題，我真的不知道從哪裏開始。

基本上我使用​​來製作旋轉木馬。

這裏是簡化的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> 

注意：此輪播中最多可以有6個事件。

下面是一個例子： http://jsfiddle.net/adrianjacob/gHpBT/3/

哪裏開始任何指針將不勝感激。

Answer 1

我想通了這一點使用上http://bxslider.com/examples/thumbnail-pager-2

的例子一個例子使用「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>'; 
     } 
    } 
    }); 
}); 

Answer 2

我只是使用bxSlider回調和公共方法構建了我自己的尋呼機。

我使用haml和coffeescript，但你應該明白了。

我使用自定義的尋呼機鏈接數據-id屬性，以配合該鏈接到特定幻燈片

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 

Answer 3

請查看低於html代碼的分頁

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

<ul id="bxslider1"> 
 
    <li> 
 
    your contant 
 
    </li> 
 
    <li> 
 
    your contant 
 
    </li> 
 
    <li> 
 
    your contant 
 
    </li> 
 
    <li> 
 
    your contant 
 
    </li> 
 
</ul> 
 
<ul id="bxsliderlist1"> 
 
    <li> 
 
    <a data-slide-index="0">your contant</a> 
 
    </li> 
 
    <li> 
 
    <a data-slide-index="1">your contant</a> 
 
    </li> 
 
    <li> 
 
    <a data-slide-index="2">your contant</a> 
 
    </li> 
 
    <li> 
 
    <a data-slide-index="3">your contant</a> 
 
    </li> 
 
    
 
</ul>