# lg-swiper

> 多图轮播组件

Latest version **1.0.0** (published 2021-11-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install lg-swiper
pnpm add lg-swiper
yarn add lg-swiper
bun add lg-swiper
```

## 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.0.0 |
| Published | 2021-11-09 |
| First published | 2021-11-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lg |
| Maintainers | zqd5l |
| Keywords | swiper, carousel |

## Links

- npm: https://www.npmjs.com/package/lg-swiper
- npm.io page: https://npm.io/package/lg-swiper

## 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.0.0 (latest) — 2021-11-09

## README

# 多图轮播组件

一屏可显示多个内容物，一次移动一个内容物

## 安装

npm i --save lg-swiper

## 如何使用

使用举例
```
template：
<swiper ref="swiper" :autoplay="false" @change="swiperChange">
  <div v-for="i in 7" :key="i" class="item">
    <div class="content">{{ i }}</div>
  </div>
</swiper>

script：
import swiper from 'lg-swiper'

methods: {
  swiperChange(newIndex, oldIndex) {
    console.log("swiperChange", newIndex, oldIndex);
  }
}
```

## 参数

|参数|类型|描述|默认值|
|:----- |:------|:------|:------|
|show-num |Number |一屏显示的内容物个数 |3 |
|initial-ndex |Number |初始状态激活的内容物的索引(即最左侧内容物对应索引) |0 |
|item-width |Number |单个内容物的宽度，不传则默认为第一个内容物的宽度 |第一个内容物的宽度 |
|autoplay |Boolean |是否自动切换 |true |
|interval |Number |自动切换的时间间隔，单位为毫秒 |2000 |
|direction |String |自动切换的方向,prev or next |next |


## 方法

|方法名|描述|参数|
|:----- |:------|:------|
|prev |切换至上一个内容物 |- |
|next |切换至下一个内容物 |- |
|setActiveItem |手动切换内容物 |需要切换的内容物的索引，从 0 开始 |


## 回调事件

|事件|描述|回调参数|
|:----- |:------|:------|
|change |内容物切换时触发 |目前激活的内容物的索引，原内容物的索引 |

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