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

suiw9 2024-11-04 15:26 33 浏览 0 评论

在为你的网站主页找一个滑动轮播的插件吗？觉得框架自带的太难看了吗？或许你还想要一个炫酷的日期选择器？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 可以在 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">1</div>
    <div class="keen-slider__slide">2</div>
    <div class="keen-slider__slide">3</div>
  </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">1</div>
      <div class="keen-slider__slide">2</div>
      <div class="keen-slider__slide">3</div>
    </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 还实现了基于IOS风格的日期时间选择器，外形炫酷，交互体验好：

总结

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

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

slider.js

上一篇：体验SPA的魅力:身心放松的最佳选择
下一篇：keen-slider一款开源、多点触控、支持ie10的触摸滑块插件

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

简介

安装

示例

总结

相关推荐

取消回复欢迎你发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

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

简介

安装

示例

总结

相关推荐

取消回复欢迎 你 发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

取消回复欢迎你发表评论: