jQuery Cycle2高級尋呼器通過API

Question

我一直在使用這個jQuery Cycle2插件（http://www.malsup.com/jquery/cycle2/api/advanced.php），並且我一直在嘗試使用每張幻燈片中的標題構建自定義尋呼機。

週期2的文檔更側重於HTML中的數據屬性，但是我需要通過它的javascript替代選項來執行cycle2插件。

我一直在尋找這個buildPagerLink通過API，但無法弄清楚。

$('.p-slider').on('cycle-bootstrap', function(e, optionHash, API) { 
    API.buildPagerLink = function(opts, slideOpts, slide) { 
     //CODE TO GET H2 TITLE 
    } 
}); 

基本上我想要的是這個。每張幻燈片都有一個<h2>元素。我希望其中的文本成爲尋呼機的鏈接文本。聽起來很簡單，但我無法想象它。

任何幫助，將不勝感激。

謝謝。 Dave

Answer 1

循環引導程序存在一個已知的錯誤，因此要將它與buildPagerLink一起使用，需要將它與文檔綁定。下面將拉動H2文字和建立與它的尋呼機：

$(document).on('cycle-bootstrap', function(e, opts, API) { 
    API.buildPagerLink = function(opts, slideOpts, slide) { 
     var pagerLink; 
    var pagers = opts.API.getComponent('pager'); 
    pagers.each(function() { 
     var pager = $(this); 

      var markup = $('<span></span>').text($('h2', slide).text()); 
      pagerLink = $(markup).appendTo(pager); 
     pagerLink.on(opts.pagerEvent, function(e) { 
      e.preventDefault(); 
      opts.API.page(pager, e.currentTarget); 
     }); 
    }); 
    } 
}); 

$('.slideshow').cycle(); 

工作演示：http://jsfiddle.net/lucuma/FetC8/1/

問題作爲參考：https://github.com/malsup/cycle2/issues/157