7个最佳jQuery图像和内容滑块插件

本文概述

• 7. FlexSlider
• 6. GlideJS
• 5. Sly
• 4. jQuery LightSlider
• 3. BxSlider
• 2. Unslider
• 1. Slick

你可以使用CSS, HTML和JavaScript构建的每个网页, Web应用程序或任何其他事物, 肯定都必须在某个位置包含一个滑块。滑块可用于显示一些简单的图像, 样式化的div(当然还有你自己的样式)或你可以想象的任何东西。实现这种滑块时, 唯一的问题就是要使用哪个滑块。你可以在互联网上找到很多选择, 其中一些是开源的, 付费的或可怜的不再保留。这就是为什么我们收集了开发人员社区中7个最无礼, 最易于使用和最喜欢的jQuery Slider插件的原因, 因此你可以轻松地做出决定。

7. FlexSlider

Github

Flexslider是一个很棒的, 响应迅速的jQuery滑块插件。它旨在提供最佳的响应式jQuery滑块, 并构建了不同Web项目的响应式滑块的一些实现。 FlexSlider已在Safari 4 +, Chrome 4 +, Firefox 3.6 +, Opera 10+和IE7 +中得到验证。同时支持iOS和Android设备。支持jQuery 1.3+版本。 FlexSlider使用GPLv2许可证和更高版本。为了使插件向前发展, 已放弃了对jQuery 1.4.2的支持。该插件现在需要jQuery 1.7.0+。如果你无权使用更高版本的jQuery, 则FlexSlider 1.8应该是你需要的理想替代品。

6. GlideJS

Github

Glide是响应式且触摸友好的jQuery滑块。基于CSS3过渡。它简单, 轻巧且快速。专为滑动而设计, 不会少也不会多。它已经在IE10 +, Chrome, Firefox, Opera, Safari中使用。模块化结构可提供出色的压缩效果, 因此在生产版本中, 其重量仅为〜14kB。它提供了非常友好的API, 功能性HTML属性以及丰富的选项, 使构建自定义滑块变得容易。

5. Sly

Github

Sly是一个JavaScript库, 用于单向滚动以及基于项目的导航支持。 Sly的主要功能是：

• 鼠标滚轮滚动。
• 滚动条(拖动手柄或单击滚动条)。
• 页面栏。
• 各种导航按钮。
• 用鼠标或触摸拖动内容。
• 按项目或页面自动循环。
• 很多超级有用的方法。

所有这些都围绕着使用requestAnimationFrame进行的自定义高度优化的动画渲染以及不支持它的浏览器的GPU加速定位和后备。

4. jQuery LightSlider

Github

JQuery lightSlider是轻量级的响应式内容滑块, 带有轮播缩略图导航。该插件的主要功能是：

• 完全响应-将适应任何设备。
• 每个断点分别设置。
• 画廊模式创建带有缩略图的图像幻灯片
• 支持滑动和鼠标拖动
• 动态添加或删除幻灯片。
• 小文件大小, 完全主题化, 易于实现。
• 具有jQuery后备功能的CSS过渡。
• 完整的回调API和公共方法。
• 自动播放和无限循环以创建内容轮播。
• 键盘, 箭头和圆点导航。
• Chrome, Safari, Firefox, Opera, IE7 +, IOS, Android, Windows Phone。
• 滑动和淡入淡出效果。
• 自动宽度, 垂直滑动, 自适应高度, RTL支持…
• 一页上有多个实例。
• 滑动任何东西(YouTube, Vimeo, 谷歌地图…)

3. BxSlider

Github

BxSlider是一个完全加载的基于jQuery的响应式内容滑块。该滑块的主要功能是：

• 完全响应-将适应任何设备
• 水平, 垂直和淡入淡出模式
• 幻灯片可以包含图像, 视频或HTML内容
• 内置高级触摸/滑动支持
• 使用CSS过渡制作幻灯片动画(本地硬件加速！)
• 完整的回调API和公共方法
• 文件小, 主题完整, 易于实现
• 浏览器支持：Firefox, Chrome, Safari, iOS, Android, IE7 +
• 大量的配置选项

bxSlider是根据WTFPL许可发布的。这意味着你实际上可以使用此插件执行任何操作。如果喜欢并使用它, 可以向开发人员捐款。

2. Unslider

Github

Unslider是一个非常简单的jQuery滑块, 是最简单的方法, 可以在几秒钟内启动并运行一个简单的滑块。你所需要的只是一些有效的标记, jQuery和一些额外的CSS, Unslider可以完成其余工作。 Unslider使用HTML元素包装所有内容, 并将所有幻灯片作为无序列表放入其中。你可以在每张幻灯片中放入任何HTML。

1. Slick

Github

Slick是一个完全响应的滑块插件, 可随其容器缩放。你可以为每个断点定义单独的设置。此外, 它具有很高的性能, 因为它在可用时使用CSS3动画, 但在不使用时可以相同。如果愿意, 可以滑动, 同时支持桌面鼠标拖动无限循环。通过箭头键导航可完全访问添加, 删除, 过滤和取消过滤幻灯片自动播放, 点, 箭头, 回调等。

如果你知道用于图像或纯HTML内容的另一个很棒的开源滑块, 请不要害羞, 并在评论框中与社区分享。