AnythingSlider jQuery 插件

世界需要的正是另一个 jQuery 滑块。 呵欠。 我知道，不过看看这个吧，它有很多很酷的功能。

在 CSS-Tricks 上，我创建了许多不同的滑块。 事实上是三个。“特色内容” 滑块、“启动/停止滑块” 和“移动方块”。 它们每个都具有一些当时我需要构建的酷炫有趣的功能。 它们都广受好评，但就像这些事情一样，人们希望它们除了已经执行的操作外，还能执行 X、Y 和 Z 操作。

这个新的 AnythingSlider 试图将所有这些先前滑块的功能整合在一起，并添加新功能。 换句话说，是要创建一个真正“功能齐全”的滑块，使其能够被广泛使用。 这是（在 CSS-Tricks 上）这些滑块第一次也是一个真正的插件，这应该会使实现和自定义它变得更容易。

 

查看演示   下载文件

演示页面包含当前版本、完整用法和最新的更改日志。

功能

• 幻灯片是 HTML 内容（可以是任何内容）
• 下一张幻灯片/上一张幻灯片箭头
• 导航选项卡是动态构建和添加的（任意数量的幻灯片）
• 用于格式化导航文本的可选自定义函数
• 自动播放（可选功能，可以开始播放或停止）
• 每张幻灯片都有一个哈希标签（可以直接链接到特定幻灯片）
• 无限/连续滑动（始终沿您正在滑动的方向滑动，即使在“最后”一张幻灯片上也是如此）
• 每页允许使用多个滑块（哈希标签仅在第一个上有效）
• 悬停时暂停自动播放（选项）
• 从静态文本链接链接到特定幻灯片
• ……以及…… 等等…… 更多！

自定义

添加/删除幻灯片

只需从 <div class=”wrapper”> 内部的列表中添加或删除更多 <li> 项目，其他所有操作都会自动发生。

调整大小

例如，如果您想将幻灯片宽度更改为 580px 而不是 680px，您只需要更改一些 CSS。 更改宽度的 .anythingSlider ul li 为 580px，更改宽度的 .anythingSlider .wrapper 为 580px，并将宽度的 .anythingSlider 100px 减少到 660px。

从静态链接直接链接到幻灯片

使用 ID 或类（或任何内容）定位链接，并应用点击处理程序。 然后调用插件函数并向其传递您尝试链接到的幻灯片的编号

$("#slide-jump").click(function(e){
    $('.anythingSlider').anythingSlider(6);
    e.preventDefault();
});

鸣谢

它由我编写，代码是从 Remy Sharp 的一些 滑块 和我之前自己的滑块中拼凑而成的。 Doug Neiner 介入并帮助使其更高效、更智能，并修复了一些错误。