Keen-Slider:给你丝滑体验的滑动轮播插件

在为你的网站主页找一个滑动轮播的插件吗?觉得框架自带的太难看了吗?或许你还想要一个炫酷的日期选择器?Keen-slider,这个对滑动特别有研究的前端插件,就能满足你的需求。

Keen-Slider - 给你丝滑体验的滑动轮播插件

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 在内的所有现代浏览器上使用。

Keen-Slider - 给你丝滑体验的滑动轮播插件

keen-slider轮播示例

Keen-Slider - 给你丝滑体验的滑动轮播插件

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 (<div ref={sliderRef}>
    <div class="keen-slider__slide">1div>
    <div class="keen-slider__slide">2div>
    <div class="keen-slider__slide">3div>
  div>)
}

也可以在浏览器中直接使用 CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js">script>

示例

Keen-slider 使用简单,首先给出一个简单的例子:

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css" />
  head>
  <body>
    <div id="my-keen-slider" class="keen-slider">
      <div class="keen-slider__slide">1div>
      <div class="keen-slider__slide">2div>
      <div class="keen-slider__slide">3div>
    div>
    <script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js">script>
    <script>
      var slider = new KeenSlider(\'#my-keen-slider\')
    script>
  body>
html>

这个例子中,我们定义了一个具有 keen-slider 的 class 的容器,并在其中定义了3个页面,这就定义了一个默认配置的具有3个页面的滑动轮播。

Keen-Slider - 给你丝滑体验的滑动轮播插件

keen-slider基本轮播1

Keen-Slider - 给你丝滑体验的滑动轮播插件

keen-slider基本轮播2

我们还可以实现更为复杂的轮播效果。

Keen-Slider - 给你丝滑体验的滑动轮播插件

多页面显示

Keen-Slider - 给你丝滑体验的滑动轮播插件

多页面居中显示

Keen-Slider - 给你丝滑体验的滑动轮播插件

可点击的导航界面

Keen-Slider - 给你丝滑体验的滑动轮播插件

放大缩小的转场效果

此外,keen-slider 还实现了基于IOS风格的日期时间选择器,外形炫酷,交互体验好:

Keen-Slider - 给你丝滑体验的滑动轮播插件

日期选择器

Keen-Slider - 给你丝滑体验的滑动轮播插件

时间选择器

总结

Keen-slider实现了一个外形美观、交互友好的滑动和轮播插件,可以作为前端框架中默认轮播插件的补充。

Keen-slider项目代码量不大,代码较为规范,兼容性和可扩展性强,且在其文档网站提供了丰富的例子展示,是一个值得学习的前端插件项目。

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/10156.html

发表评论

登录后才能评论