# mslide

> 轻量级内容切换插件。

Latest version **1.2.3** (published 2020-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install mslide
pnpm add mslide
yarn add mslide
bun add mslide
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2020-12-01 |
| First published | 2020-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Travis |
| Maintainers | godxiaoji |
| Keywords | swiper, slide |

## Links

- npm: https://www.npmjs.com/package/mslide
- Repository: https://github.com/godxiaoji/mslide
- Homepage: https://github.com/godxiaoji/mslide#readme
- Issues: https://github.com/godxiaoji/mslide/issues
- npm.io page: https://npm.io/package/mslide

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.2.3 (latest) — 2020-12-01
- 1.2.2 — 2020-11-04
- 1.2.1 — 2020-10-29
- 1.2.0 — 2020-10-28
- 1.1.2 — 2020-10-27
- 1.1.1 — 2020-09-28
- 1.1.0 — 2020-09-28
- 1.0.2 — 2020-03-11
- 1.0.0 — 2020-03-01
- 0.0.7 — 2020-03-01
- 0.0.6 — 2020-03-01

## README

# MSlide.js

内容滑动插件

可用于实现幻灯片
或者安卓常见的左右滑动窗口

## Usage

eg:

```
<script type="text/javascript" src="path/to/dist/mslide.js"></script>
<script>
  var slide = new MSlide({selector: ".wrap"});
</script>
```

## Options

插件提供可配置的选项：

- `selector`: 模块选择器，可以是`#id/.class`或`Element`
- `listSelector`: 列表选择器，参数同上，如果不传入则为第一个子元素
- `prevSelector`: 点击可跳转到上一项的元素，参数同上，一般配合幻灯片使用
- `nextSelector`: 点击可跳转到下一项的元素，参数同上，一般配合幻灯片使用
- `autoPlay`: 是否自动滑动，一般幻灯片使用，默认`false`
- `interval`: 两次滑动之间的间隔时间，默认`4000`秒
- `loop`: 是否循环切换，默认`false`
- `easing`: 动画曲线，有`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`可选，默认`ease`
- `duration`: 动画时间，默认`100`ms
- `slideType`: 动画效果，目前有`fade`渐变，和`slide`滑动，默认`slide`
- `direction`: 切换方向，目前有`y`竖向切换，和`x`横向切换，默认`x`，`slide`模式下有效
- `index`: 初始定位指定项，默认`0`
- `onBeforeSlide`: 滑动前回调函数，调用后传入索引作为第一个参数，`this`指向`slide`自身
- `onSlide`: 滑动后回调函数，调用后传入索引作为第一个参数，`this`指向`slide`自身
- `onClick`: 点击后回调函数（滑动时不触发），调用后传入点击事件作为第一个参数，`this`指向`slide`自身

## Method

### MSlide.prototype.to(index)

滑动到指定项（已做边界处理），如滑动到第 6 项（0 开始），eg:

```
slide.to(5);
```

### MSlide.prototype.prev()

滑动到上一项（不做循环）

### MSlide.prototype.next()

滑动到上一项（不做循环）

### MSlide.prototype.refresh()

刷新列表项，比如说增加了一项。

### MSlide.prototype.destroy()

销毁绑定事件和自动滑动。

## Author

[Travis](https://github.com/godxiaoji)

---
_Source: https://npm.io/package/mslide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._