Question

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

    $('#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>来匹配文档）：

<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 。

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

1 个答案: