简单实用的手机端滑动组件， 支持多种过渡效果，左右/垂直切换，指示器等。
var slider = new mSlider({
el: '#slider',
data: [
'./img/slider1.png',
'<div>slider2</div>',{
name: 'first',
content: '<div>slider3</div>'
}
],
initSlide: 0,
autoPlay: true,
loop: true,
duration: 3000,
touchRange: 14,
transtionType: 'normal',
transtionTimeFn: 'ease-out',
transtionTime: 300,
showIndicator: true,
indicatorPos: 'center',
indicatorType: 'normal',
vertical: false,
enableGPU: true,
replace: false
})PC预览: 👉 DEMO
手机扫码预览:
npm
npm install mSlider --savegit clone
git clone https://github.com/kraaas/mSlider.git1.创建一个空节点
<div id="slider"></div>2.引入 mSlider.min.css 和 mSlider.min.js
<script src="mSlider.min.css"></script>
<script src="mSlider.min.js"></script>3.定义你的展示数据
var data = [
'./img/img1.png',
'./img/img2.png',
'./img/img3.png'
]4.创建 mSlider 实例
var slider = new mSlider({
el: '#slider',
data: data,
autoPlay: false,
loop: false,
...
})| 配置项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| el | slider容器 | String/Element | |
| data | 用于slider展示的数据 | Arrya | [ ] |
| width | slider宽度(px) | Number | el的宽度 |
| height | slider高度(px) | Number | el的高度 |
| initSlide | 初始化后显示第几个slide | Number/String | 1 |
| autoPlay | 是否自动播放 | Boolean | true |
| loop | 是否循环播放 | Boolean | true |
| duration | 播放的时间间隔(ms) | Number | 3000 |
| touchRange | 有效触摸范围(px) | Number | 10 |
| transtionType | 过渡效果类型 | String | normal |
| transtionTimeFn | 过渡效果函数 | String | easy-out |
| transtionTime | 过渡效果完成时间(ms) | Number | 300 |
| showIndicator | 是否显示指示器 | Boolean | true |
| indicatorPos | 指示器位置 | String | center |
| indicatorType | 指示器类型 | String | normal |
| vertical | 是否垂直滚动 | Boolean | false |
| enableGPU | 是否启用3D加速 | Boolean | true |
| replace | 是否覆盖容器 | Boolean | flase |
用于放置slider的容器，可设置其宽高，或者在配置项中指定slider的宽高.
可以是css选择器, 也可以是Element对象：
// selector
new mSlider({
el: '#slider'
...
})
// Element
var container = document.querySelector('#slider')
new mSlider({
el: container
...
})用于slider展示的数据，数组类型，数组项可以是以下三种类型的任意混合：
1.图片路径
new mSlider({
data: [
'https://domain.img.com/slider1.jpg',
'https://domain.img.com/slider2.jpg',
]
})2.html字符串
new mSlider({
data: [
'<div>slider1</div>',
'<div><a href="#">slider2</a></div>',
]
})注：html字符串只允许有一个顶级元素
// wrong
new mSlider({
data: [
'<div>slider1</div><div>wrong</div>',
]
})
// right
new mSlider({
data: [
'<div>slider1<div>right</div></div>',
]
})3.对象
对象有两个属性：
name: slide的名称, 表示唯一标识， 可用于slideTo方法的跳转。
content: slide内容, 可以是以上两种格式。
new mSlider({
data: [{
name: 'slider1',
content: 'https://domain.img.com/slider1.jpg'
},{
name: 'slider2',
content: '<div>slider2</div>'
}]
})初始化时显示的slide，可以是Numbe表示第几个slide,可以是slide的name属性：
new mSlider({
data: [{
name: 'slider1',
content: 'https://domain.img.com/slider1.jpg'
},{
name: 'slider2',
content: '<div>slider2</div>'
}],
initSlide: 2 // 显示第二个slide
})
new mSlider({
data: [{
name: 'slider1',
content: 'https://domain.img.com/slider1.jpg'
},{
name: 'slider2',
content: '<div>slider2</div>'
}],
initSlide: 'slider2' // 也是显示第二个slide
})过渡效果的类型，支持滚动(normal),透明度渐变(fade)
过渡效果的完成时间函数，支持css transition属性的值
指示器的位置：left, center, right
指示器的类型：点状normal，圆形circle
跳转到指定的slide, 接受一个参数key, 可以为slide的序号和name属性：
跳转到第2个slide
slider.slideTo(2)跳转到name属性为food的slide,若未找到则默认跳转到第一个slide。
slider.slideTo('food')跳转到上一个slide
跳转到下一个slide
停止循环轮播(设置了autoPlay为true)
注销slider