0

我一直在使用这个 jQuery Cycle2 插件（http://www.malsup.com/jquery/cycle2/api/advanced.php），并且我一直在尝试使用每张幻灯片内部的标题来构建自定义寻呼机。

cycle 2 的文档更多地关注 HTML 中的数据属性，但是我需要通过它的 javascript 替代方案来执行 cycle2 插件。

我一直在通过 API 查看这个 buildPagerLink 但无法弄清楚。

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

基本上我想要的是这个。每张幻灯片都有一个<h2>元素。我希望其中的文本成为寻呼机的链接文本。听起来很简单，但我想不通。

任何帮助，将不胜感激。

谢谢。戴夫

4

1 回答 1

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

于 2013-04-09T14:09:03.830 回答