Caroufredsel 分页：不是数字，而是标题

Question

我正在使用 Caroufredsel 插件创建轮播分页。我想创建自定义唯一标题，而不是分页中的默认数字。我希望每个标题都完全不同。目前我设法使用“anchorBuild”来添加字母标题（例如测试）但不是完全不同的标题。您的帮助将不胜感激！

    $('#foo0').carouFredSel({
      auto: { duration: 600 },
      pagination: {
        container:".menu",
        anchorBuilder: function(nr) { return '<li><a href="#"><span>Test '+nr+'</span></a></li>';}
      },
      mousewheel: true,
      swipe: { onMouse: true },
    });

<ul class="menu">
  <li><a href="#environment">Environment</a></li>
  <li><a href="#market">Marketplace</a></li>
  <li><a href="#community">Community</a></li>
  <li><a href="#workplace">Workplace</a></li>
</ul>

Answer 1

根据plugin's documentation（旧文档位于here），您可以简单地设置achorBuilder: false，然后使用您自己的带有自定义标题的HTML标记。

所以你的 HTML 是这样的（注意：我添加了 <span>s 以匹配文档）：

<ul class="menu">
  <li><a href="#Environment"><span>Environment</span></a></li>
  <li><a href="#Marketplace"><span>Marketplace</span></a></li>
  <li><a href="#Community"><span>Community</span></a></li>
  <li><a href="#Workplace"><span>Workplace</span></a></li>
</ul>

然后是你的 jQuery：

$('#carousel').carouFredSel({
    auto: {
        duration: 600
    },
    pagination: {
        container: ".menu",
        anchorBuilder: false
    },
    mousewheel: true,
    swipe: {
        onMouse: true
    }
});

这是一个有效的jsfiddle。