Question

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

我的意思是我有3张带有html内容和/或表单字段的幻灯片。我想定义自己的锚链接以继续或返回。我希望能够通过数据属性或在其上放置“back”或“next”的类名来实现此目的。

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

实施例

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

Answer 1

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

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

数据滑动= “下一个”
数据目标= “＃滑块”

上述示例的结果代码为：

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

jQuery内容滑块没有通用导航按钮

实施例

1 个答案: