触摸框使用演示（keen-slider一款开源多点触控）
触摸框使用演示（keen-slider一款开源多点触控）源码地址：https://github.com/rcbyr/keen-slider，有兴趣的同学可以自己研究一下，希望对大家能有所帮助。最后希望大家多多评论、关注、点赞、转发，你们的支持，是我更新下去的最大动力。keen-slider 整体上表现很是很不错的，和swiper基本差不多。但体积更小、兼容IE10。如果只是要用滑动、轮播、多点触控，强力推荐keen-slider。# 根据dom对象初始化 var slider = new KeenSlider('#my-slider' { loop: true created: () => { console.log('created') } ... })配置选项回调事件实例化方法
简介keen-slider 具有最原生APP效果的HTML触摸滑块轮播
- 开源、免费
- 无任何依赖，原生js
- 支持触摸、滑动、多点触控
- 兼容大部分浏览器（包括IE10）
1、npm 安装
# npm 安装
npm install keen-slider --save
# 引用
import 'keen-slider/keen-slider.min.css'
import KeenSlider from 'keen-slider'
const slider = new KeenSlider('#my-keen-slider')
2、CDN引用
<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>使用
初始化
# 根据dom对象初始化
var slider = new KeenSlider('#my-slider' {
loop: true
created: () => {
console.log('created')
}
...
})
配置选项
回调事件
实例化方法
keen-slider 整体上表现很是很不错的，和swiper基本差不多。但体积更小、兼容IE10。如果只是要用滑动、轮播、多点触控，强力推荐keen-slider。
源码地址：https://github.com/rcbyr/keen-slider，有兴趣的同学可以自己研究一下，希望对大家能有所帮助。最后希望大家多多评论、关注、点赞、转发，你们的支持，是我更新下去的最大动力。
