0

我正在寻找一个 jQuery Content Slider 插件（一角钱），但我需要一个不使用“通用”导航结构的插件。我需要能够为每张幻灯片定义自己的后退和下一个按钮，并且可以选择没有后退按钮或多个下一个按钮。

我的意思是我有 3 张幻灯片，其中包含 html 内容和/或表单字段。我想定义自己的锚链接以继续或返回。我希望能够通过数据属性或在它们上放置一个“后退”或“下一个”的类名来做到这一点。

这似乎并不难，但我还没有找到一个没有通用箭头、按钮等的开箱即用解决方案。如果你知道一个，我将非常感激。我希望它也支持过渡幻灯片，但不是必需的，我不需要它来支持任何自动计时功能。

例子：

<div id="slider">
  <div class="slide">
    // form
    <a class="next">Submit</a>
  </div>
  <div class="slide">
    // content
    <a class="next">Select Me</a>
    // content
    <a class="next">No Select Me</a>
    // content
    <a class="next">Select Me Instead</a>
    <a class="back">Go Back and Edit that Form</a>
  </div>
  <div class="slide">
    // content
    <a class="next">Continue On</a>
  </div>
</div>
4

1 回答 1

0

我发现 Bootstrap 的 carousel.js 文件支持这个功能。

您所要做的就是添加几个数据属性：

  • 数据幻灯片=“下一个”
  • 数据目标=“#slider”

上面示例的结果代码将是：

<div id="slider">
  <div class="slide">
    // form
    <a data-slide="next" data-target="#slider">Submit</a>
  </div>
  <div class="slide">
    // content
    <a data-slide="next" data-target="#slider">Select Me</a>
    // content
    <a data-slide="next" data-target="#slider">No Select Me</a>
    // content
    <a data-slide="next" data-target="#slider">Select Me Instead</a>
    <a data-slide="prev" data-target="#slider">Go Back and Edit that Form</a>
  </div>
  <div class="slide">
    // content
    <a data-slide="next" data-target="#slider">Continue On</a>
  </div>
</div>
于 2013-04-12T16:38:33.640 回答