# wil-carousel-img

> 图片轮播组件

Latest version **1.0.0** (published 2023-09-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install wil-carousel-img
pnpm add wil-carousel-img
yarn add wil-carousel-img
bun add wil-carousel-img
```

## 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 | 2023-09-04 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ncushujian |
| Maintainers | ncushujian |

## Links

- npm: https://www.npmjs.com/package/wil-carousel-img
- npm.io page: https://npm.io/package/wil-carousel-img

## Recent versions

- 1.0.0 (latest) — 2023-09-04

## README

# wil-carousel-img
> 一套基于dom节点的图片轮播组件

**[Demo示例]()**       
**[前往Gitee](https://gitee.com/ncushujian/wil-web-modules/tree/master/carousel-img)**

**注意**  
1. 图片轮播组件在修改轮播图片列表之后，调用  `carousel.init(dom);` 方法即可更新轮播图片列表。

## 安装
```shell
npm install wil-carousel-img
```

## 使用方式
```html
<style>
  .carousel-wrap {
    /* 图片轮播组件容器，这两个CSS属性必须存在 */
    position: relative;
    overflow: hidden;
  }
</style>
<div class="carousel-wrap">
  <div class="img-box">
    <div class="carousel-slider">
      <img class="carousel-img" src="http://img0.imgtn.bdimg.com/it/u=2125288902,1890865968&fm=26&gp=0.jpg">
    </div>
    <div class="carousel-slider">
      <img class="carousel-img" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2520433466,1070276963&fm=26&gp=0.jpg">
    </div>  
    <div class="carousel-slider">  
      <img class="carousel-img" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2520433466,1070276963&fm=26&gp=0.jpg">
    </div>  
    <div class="carousel-slider">  
      <img class="carousel-img" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2520433466,1070276963&fm=26&gp=0.jpg">
    </div>  
    <div class="carousel-slider">  
      <img class="carousel-img" src="http://img2.imgtn.bdimg.com/it/u=415472049,3360294245&fm=26&gp=0.jpg">
    </div>  
  </div>
  <ul class="indicator-list"></ul>
</div>
```
```javascript
import Carousel from 'wil-carousel-img';

var dom = document.getElementsByClassName('carousel-wrap')[0];
var carousel = new Carousel();
carousel.init(dom);
```

### 在 Vue 中使用
```
<template>
  <div class="app-wrap">
    <div class="carousel-wrap" ref="carouselWrap">
      <div class="img-box">
        <div class="carousel-slider" v-for="(item, index) in imgList" :key="index">
          <img class="carousel-img" :src="item">
        </div>
      </div>
      <ul class="indicator-list"></ul>
    </div>
    <button v-tap="addImg">添加图片</button>
  </div>
</template>
<script>
import Carousel from 'wil-carousel-img';
export default {
  name: 'Demo',
  data () {
    return {
      carousel: null,
      imgList: [
        'http://img0.imgtn.bdimg.com/it/u=2125288902,1890865968&fm=26&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2520433466,1070276963&fm=26&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2520433466,1070276963&fm=26&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2520433466,1070276963&fm=26&gp=0.jpg'
      ]
    }
  },
  methods: {
    addImg () {
      this.imgList.push('http://img0.imgtn.bdimg.com/it/u=2125288902,1890865968&fm=26&gp=0.jpg');
      this.$nextTick(() => {
        this.carousel.init(this.$refs.carouselWrap);
      });
    }
  },
  mounted () {
    this.carousel = new Carousel();
    this.carousel.init(this.$refs.carouselWrap);
  }
}
</script>
<style>
  .carousel-wrap {
    position: relative;
    overflow: hidden;
  }
</style>
```

## API
### new Carousel(Object object)
> 用于初始化一个Carousel实例，返回初始化后的Carousel实例。

**参数**
**Object object**

属性 | 类型 | 默认值 | 是否必填 | 说明  
-|-|-|-|-|
autoPlay | Boolean | true | 否 | 是否开启自动轮播
delay | Number | 3500 | 否 | 轮播图轮播间隔时间
width | Number | 无 | 否 | 图片轮播组件容器宽度
showIndicator | Boolean | true | 否 | 是否展示轮播图指示器
sliderChange | Function | 无 | 否 | 轮播图切换触发执行的回调函数，返回当前轮播图的索引值

### carousel.init(dom)
> 初始化Carousel

参数 | 类型 | 默认值 | 是否必填 | 说明  
-|-|-|-|-|
dom | Object | 无 | 是 | 图片轮播组件容器DOM节点

### carousel.slideTo(index)
> 滑动到指定轮播图索引位置

参数 | 类型 | 默认值 | 是否必填 | 说明  
-|-|-|-|-|
index | Number | 无 | 是 | 轮播图索引从0开始。当开启自动轮播的情况下，暂不进行支持 slideTo 方法

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