在为你的网站主页找一个滑动轮播的插件吗?觉得框架自带的太难看了吗?或许你还想要一个炫酷的日期选择器?Keen-slider,这个对滑动特别有研究的前端插件,就能满足你的需求。
![77146341693715461ded9f0f3abcd4de.png](https://i-blog.csdnimg.cn/blog_migrate/fb8f914d393fc9b29f910c407a66729d.jpeg)
keen-slider插件
简介
Keen-slider,是 rcbyr 在 Github 上开源的滑动和轮播JS插件,代码仓库位于 https://github.com/rcbyr/keen-slider,目前版本为 5.0.3。Keen-slider 交互体验优秀,性能优越,没有额外依赖,支持 Typescript,支持多点触控。Keen-slider 可以在原生JS中使用,也可以在包括 React、Vue 和 Angular 等的前端框架中使用。Keen-slider 兼容性较好,可以在包括 IE10 在内的所有现代浏览器上使用。
![a3c6b2052bfb91ee41e6b6fe0574d51a.gif](https://i-blog.csdnimg.cn/blog_migrate/2acd5571b40f3c95b5ef05c1bc9fb877.gif)
keen-slider轮播示例
![2ed9590030284be965dda67cfec25aa7.gif](https://i-blog.csdnimg.cn/blog_migrate/4311417ce879ef07fe8dddd8aad107fb.gif)
keen-slider日期选择示例
安装
Keen-slider 可以在 Javascript 或 Typescript 项目中使用,可以直接 NPM 进行安装:
npm install keen-slider --save
作为模块引入使用
import 'keen-slider/keen-slider.min.css'import KeenSlider from 'keen-slider'
也可以在特定的框架下使用,如在 React 中作为 hook 添加:
import React from 'react'import 'keen-slider/keen-slider.min.css'import { useKeenSlider } from 'keen-slider/react'export default () => { const [sliderRef, slider] = useKeenSlider() return (
)}
也可以在浏览器中直接使用 CDN:
示例
Keen-slider 使用简单,首先给出一个简单的例子:
这个例子中,我们定义了一个具有 keen-slider 的 class 的容器,并在其中定义了3个页面,这就定义了一个默认配置的具有3个页面的滑动轮播。
![c452ecc3b57a79e6487d75aadb762f56.png](https://i-blog.csdnimg.cn/blog_migrate/da7e420bb4a2793bdd57c209ea18d2ae.jpeg)
keen-slider基本轮播1
![0c3c15db01c33bf8696e13f8fc692008.png](https://i-blog.csdnimg.cn/blog_migrate/fcf59cad9686fe6d4190427446601130.jpeg)
keen-slider基本轮播2
我们还可以实现更为复杂的轮播效果。
![42800a8174ce69239e6ea4da08da412b.png](https://i-blog.csdnimg.cn/blog_migrate/1de01a4a84ba898b3a55bd74ae4b5c06.jpeg)
多页面显示
![2b8b5fc5b5f30ba2d1ab330bc93dfd29.png](https://i-blog.csdnimg.cn/blog_migrate/357c005abe38d747a810002d3207a1a0.jpeg)
多页面居中显示
![c34c00ee00c5ca96b0b753602c825b95.png](https://i-blog.csdnimg.cn/blog_migrate/2f5be119a7baed15d01c756cdd009464.jpeg)
可点击的导航界面
![5589966784cfa5c1f844f24e4bdfafec.png](https://i-blog.csdnimg.cn/blog_migrate/52c452ec17c11e430a80564d8b101ae9.jpeg)
放大缩小的转场效果
此外,keen-slider 还实现了基于IOS风格的日期时间选择器,外形炫酷,交互体验好:
![da184f316b4d860fe997b7c4e17a5abd.png](https://i-blog.csdnimg.cn/blog_migrate/90a3d482ce4772b12a2f9bde2f81d2f0.jpeg)
日期选择器
![c09bb8ad862b84319aeec3c3dc982f9e.png](https://i-blog.csdnimg.cn/blog_migrate/012ad16f7c71cef6cccf178154e63f94.jpeg)
时间选择器
总结
Keen-slider实现了一个外形美观、交互友好的滑动和轮播插件,可以作为前端框架中默认轮播插件的补充。
Keen-slider项目代码量不大,代码较为规范,兼容性和可扩展性强,且在其文档网站提供了丰富的例子展示,是一个值得学习的前端插件项目。