5个最佳的框架无关JavaScript滑块库

本文概述

• 5.Tiny Slider
• 4.Sly
• 3.Slidr.js
• 2.Flickity
• 1.Swiper
• Wallop

有很多与jQuery兼容的滑块插件, 但是根据你项目的要求或工作方式, 你将希望在不依赖任何框架但依赖于库的应用程序上实现一个滑块本身。因此, 你将不会依赖jQuery的动画(在大多数情况下仅在浏览器不支持CSS3动画时才使用)或类似的其他库。

为了使你的任务轻松完成, 我们收集了5种没有任何依赖关系的最佳滑块。享受我们的顶级！

5.Tiny Slider

Github

Tiny Slider是可用于所有目的的普通javascript滑块。它受Owl Carousel的启发, 可在Firefox 12 +, Chrome 15 +, Safari 4 +, Opera 12.1 +, IE8 +上运行。 Tiny Slider的主要功能是：

• 轮播/画廊
• 反应灵敏
• 固定宽度
• 垂直滑块
• 天沟
• 边缘填充(中心)
• 环
• 倒带
• 滑过
• 自定义控件/导航
• 延迟加载。
• 自动播放。
• 自动高度。
• 触摸支持。
• 鼠标拖动。
• 方向键。
• 使用键盘导航或屏幕阅读器的用户的可访问性。
• 对可见度变化的响应。
• 自定义事件。
• 嵌套的滑块。

4.Sly

Github

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

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

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

3.Slidr.js

Github

Slidr.js是一个非常简单的轻量级JavaScript库, 用于向页面添加幻灯片过渡。它是完全不可知的, 这意味着它不依赖另一个库来工作。它提供了对Chrome 26.0, Firefox 20.0, Safari 5.1.7, IE 10, Opera 16.0的支持以及对IE8 / 9的有限支持。一些最著名的功能是：

• 根据需要添加任意多个Slidr, 甚至可以将它们相互放置。
• 动态调整大小, 使其适应其内容的大小, 除非你不希望这样做。
• 键盘导航, 你可以将光标移动到滑块顶部, 然后按箭头键。
• 还支持移动设备的触摸导航。通过向左, 向右, 向上或向下滑动来更改幻灯片。

2.Flickity

Github

Flickity是一个有用的库, 可让你创建触摸式, 响应式, 可滑动的轮播。如果要在与GNU GPL许可证v3兼容的许可证下创建开源应用程序, 则可以根据GPLv3的条款使用Flickity。你可以将Flickity与香草JS结合使用：new Flickity(elem)。 Flickity()构造函数接受两个参数：轮播元素和options对象。

1.Swiper

Github

Swiper是最现代的现代Mobile Ready Touch Slider之一, 具有硬件加速过渡和惊人的本机行为。它旨在用于移动网站, 移动Web应用程序和移动本机/混合应用程序。主要为iOS设计, 但在最新的Android, Windows Phone 8和现代桌面浏览器上也能很好地工作。

Swiper并非与所有平台兼容, 它是一种现代的触摸滑块, 仅专注于现代应用程序/平台, 以带来最佳的体验和简洁性。因此, 如果你仍然需要旧的浏览器支持, 则可以在Swiper2 Branch中找到它。

Wallop

Github

Wallop不仅仅是一个滑块, 它还是一个最小的4kb库, 用于显示和隐藏事物(主要是图像)。这个小型图书馆的主要特点是：

• 移动优先
• 渐进增强
• 过渡/动画都在CSS中
• 最少的JavaScript
• 灵活可扩展
• 自定义事件和可用的API
• 缩小4KB
• 无依赖

如果你知道另一个没有任何依赖性的滑块库, 请在评论框中与社区共享。