# MCarousel 走马灯

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/carousel/freepass)
- 平台：移动端
- 维护者：赵俊飞
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MCarousel]

## 代码演示

### 基础用法

横向滚动,默认分页器。

```jsx
import React, { Component } from "react";
import { MCarousel, constantsM, Swiper } from "@weapp/ui";
import { classnames as classNames } from "@weapp/utils";
import p1 from "../../../../assets/images/zzpic9638.jpg"
import p2 from "../../../../assets/images/zzpic9478_s_w285.jpg"
import p3 from "../../../../assets/images/zzpic12518_s_w285.jpg"

const s1 = p1;
const s2 = p2;
const s3 = p3;
const prefixCls = `${constantsM.uiMClsPrefix}-demo-carousel`;

export default class CarouselDemo extends Component {

  state = {
    swiperInstance: null
  }

  onSlideChange = (swiperInstance: Swiper) => {
    console.log('onSlideChange', swiperInstance)
  }
  onSwiper = (swiperInstance: Swiper) => {
    console.log('onswiper', swiperInstance);
    this.setState({
      swiperInstance
    })
  }

  render() {
    return (
      <div className={prefixCls}>
        <MCarousel
          style={{ height: "200px" }}
         
          navigation={true}
          autoHeight
          onSlideChange={this.onSlideChange}
          onSwiper={this.onSwiper}
        >
          <img src={s1} alt="" />
          <img src={s2} alt="" />
          <img src={s3} alt="" />
        </MCarousel>
      </div>
    );
  }
}
```

### 自定义分页器样式

可修改分页器类型，通过类名覆盖分页器样式。

```jsx
import React, { Component } from "react";
import { MCarousel, constantsM } from "@weapp/ui";
import { classnames as classNames } from "@weapp/utils";

const prefixCls = `${constantsM.uiMClsPrefix}-demo-carousel`;

const slidCls = classNames(`${prefixCls}-slid`);

export default class CarouselDemo extends Component {

  render() {
    return (
      <div className={`${prefixCls}-custom-pagination`}>
        <MCarousel
         
          navigation={true}
          fillWays="imgFill"
          pagination={{
            type: 'bullets',
            bulletClass: `${prefixCls}-bullet`,
            bulletActiveClass: `${prefixCls}-bullet-active`
          }}
        >
          <div className={slidCls} >1</div>
          <div className={slidCls} >2</div>
          <div className={slidCls} >3</div>
          <div className={slidCls} >4</div>
        </MCarousel>
      </div>
    );
  }
}
```

### 垂直方向

纵向滚动,上滑查看下一个内容。

```jsx
import React, { Component } from "react";
import { MCarousel, constantsM } from "@weapp/ui";
import { classnames as classNames } from "@weapp/utils";

const prefixCls = `${constantsM.uiMClsPrefix}-demo-carousel`;

const slidCls = classNames(`${prefixCls}-slid`);

export default class CarouselDemo extends Component {

  render() {
    return (
      <div className={`${prefixCls}-custom-pagination`}>
        <MCarousel
         
          direction="vertical"
          navigation
        >
          <div className={slidCls} >1</div>
          <div className={slidCls} >2</div>
          <div className={slidCls} >3</div>
          <div className={slidCls} >4</div>
        </MCarousel>
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| autoplay | 自动切换 | boolean/Object | false | false |
| fillWays | 填充方式 | `imgFill` \| `backgroundFill` | false | backgroundFill |
| effects | 切换效果 | string | false | slide |
| pagination | 分页器 | boolea \| Object | false | false |
| pagination | 前进后退按钮 | boolean \| Object | false | false |
| loop | 是否轮播 | boolean | boolean | false |
| onSwiper | swiper加载完后执行 | (swiperInstance)=>void | false |  |
| onSlideChanger | 切换图片时的回调函数 | (swiperInstance)=>void | false |  |
> carouse 底层使用的 swiper，支持 swiper 支持的 api。
> 更多配置请参考 [swiper API](https://swiperjs.com/swiper-api)
> 如果上面链接无法打开，可参考 [swiper 中文网](https://www.swiper.com.cn/api/index.html)
