# Carousel 走马灯

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/carousel/freepass)
- 平台：PC
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s21
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Carouse]

## 代码演示

### 基础用法

默认横向滚动，长方形分页器。

```jsx
import React from "react";
import { Carousel, constants, Swiper } from "@weapp/ui";
import { classnames as classNames } from "@weapp/utils";

const prefixCls = `${constants.uiPcClsPrefix}-demo-carousel`;
export default class CarouselDemo extends React.Component {

  state = { swiperInstance: null }

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

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

    return (
      <div className={prefixCls}>

        <div className={`${prefixCls}-item`}>
          <Carousel
            fillWays="imgFill"
           
            navigation={true}
            speed={2000}
            pagination={{
              type: 'bullets'
            }}
            onSlideChange={this.onSlideChange}
            onSwiper={this.onSwiper}
          >
            <div className={slidCls} >横向滚动 1</div>
            <div className={slidCls} >横向滚动 2</div>
            <div className={slidCls} >横向滚动 3</div>
            <div className={slidCls} >横向滚动 4</div>
          </Carousel>
        </div>
        <div className={`${prefixCls}-item`}>
          <Carousel
            fillWays="imgFill"
           
            navigation={true}
            speed={2000}
            direction="vertical"
          >
            <div className={slidCls} >纵向滚动 1</div>
            <div className={slidCls} >纵向滚动 2</div>
            <div className={slidCls} >纵向滚动 3</div>
            <div className={slidCls} >纵向滚动 4</div>
          </Carousel>
        </div>
      </div>
    );
  }
}
```

### 图片注意事项

通过fillWays属性设置背景填充,不会改变原有图片尺寸。

```jsx
import React from "react";
import { Carousel, constants } from "@weapp/ui";

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 = `${constants.uiPcClsPrefix}-demo-carousel`;

export default class CarouselDemo extends React.Component {

  onImagesReady = (swiper: any) => {
    console.warn(swiper)
  }

  render() {
    return (
      <div className={prefixCls}>

        <Carousel
          fillWays="backgroundFill"
         
          effect='fade'
          fadeEffect={
            { crossFade: true }
          }
          navigation
          loop
          autoHeight
          onImagesReady={this.onImagesReady}
        >
          <img src={s1} alt="" />
          <img src={s2} alt="" />
          <img src={s3} alt="" />
        </Carousel>

        <h2>垂直方向使用要给定高度</h2>
        <Carousel
          style={{ height: "300px" }}
          fillWays="backgroundFill"
         
          fadeEffect={
            { crossFade: true }
          }
          navigation
          loop
          autoHeight
          direction="vertical"
        >
          <img src={s1} alt="" />
          <img src={s2} alt="" />
          <img src={s3} alt="" />
        </Carousel>
      </div>

    );
  }
}
```

### 切换效果

自动切换及切换效果。

```jsx
import React from "react";
import { Carousel, constants } from "@weapp/ui";
import { classnames as classNames } from "@weapp/utils";

const prefixCls = `${constants.uiPcClsPrefix}-demo-carousel`;

export default class CarouselDemo extends React.Component {

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

    return (
      <div className={prefixCls}>
        <h2>位移切换 - 一次显示多个 side</h2>
        <div className={`${prefixCls}-item`}>
          <Carousel
            fillWays="imgFill"
           
            navigation={true}
            slidesPerView={2}
            effect='slide'
            speed={1500}
            autoplay={{
              delay: 3000
            }}
            loop
            loopedSlides={5}
          >
            <div className={slidCls} >1</div>
            <div className={slidCls} >2</div>
            <div className={slidCls} >3</div>
            <div className={slidCls} >4</div>
            <div className={slidCls} >6</div>
            <div className={slidCls} >7</div>
          </Carousel>
        </div>
        <h2>淡入</h2>
        <div className={`${prefixCls}-item`}>

          <Carousel
            fillWays="imgFill"
            effect='fade'
            fadeEffect={{
              crossFade: true
            }}
            speed={1500}
            autoplay={{
              delay: 3000
            }}
            loop
          >
            <div className={slidCls} >1</div>
            <div className={slidCls} >2</div>
            <div className={slidCls} >3</div>
            <div className={slidCls} >4</div>
          </Carousel>
        </div>

        <h2>方块</h2>
        <div className={`${prefixCls}-item`}>
          <Carousel
            fillWays="imgFill"
            effect='cube'
            speed={1500}
            autoplay={{
              delay: 3000
            }}
            loop
          >
            <div className={slidCls} >1</div>
            <div className={slidCls} >2</div>
            <div className={slidCls} >3</div>
            <div className={slidCls} >4</div>
          </Carousel>
        </div>

        <h2>3d 流</h2>
        <div className={`${prefixCls}-item`}>
          <Carousel
            fillWays="imgFill"
            effect='coverflow'
            speed={1500}
            autoplay={{
              delay: 3000
            }}
            loop
          >
            <div className={slidCls} >1</div>
            <div className={slidCls} >2</div>
            <div className={slidCls} >3</div>
            <div className={slidCls} >4</div>
          </Carousel>
        </div>

        <h2>3d 翻转</h2>
        <div className={`${prefixCls}-item`}>
          <Carousel
            fillWays="imgFill"
            effect='flip'
            speed={1500}
            autoplay={{
              delay: 3000
            }}
            loop
          >
            <div className={slidCls} >1</div>
            <div className={slidCls} >2</div>
            <div className={slidCls} >3</div>
            <div className={slidCls} >4</div>
          </Carousel>
        </div>
      </div >
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| autoplay | 自动切换 | boolean/Object | false | false |
| effects | 切换效果 | string | false | slide |
| fillWays | 填充方式 | `imgFill` \| `backgroundFill` | false | backgroundFill |
| pagination | 分页器 | boolea/Object | false | false |
| navigation | 前进后退按钮 | boolean/Object | false | false |
| loop | 是否轮播 | boolean | boolean | false |
| effect | 切换方式 | `slide`\| `fade`\| `cube`\| `coverflow`\| `flip` | false | `slide` |
| speed | 切换动画速度，即 slider 自动滑动开始到结束的时间（单位 ms），也是触摸滑动时释放至贴合的时间。 | number | false | 300 |
| fadeEffect | fade 效果参数。可选参数：crossFade。 默认：false。关闭淡出。过渡时，原 slide 透明度为 1（不淡出），过渡中的 slide 透明度从 0->1（淡入），其他 slide 透明度 0。可选值：true。开启淡出。过渡时，原 slide 透明度从 1->0（淡出），过渡中的 slide 透明度从 0->1（淡入），其他 slide 透明度 0。 | boolean | false | false |
| slidesPerView | 设置 slider 容器能够同时显示的 slides 数量(carousel 模式) | number \| `auto` | false | 1 |
| 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)

## 注意事项

使用effect=fade时防止图片重叠请添加以下代码

```
       fadeEffect={
            { crossFade: true }
          }
```

## pagination配置

pagination={{
              type: 'bullets'
            }}

说明：横向滚动分页器类型，可选 bullets 圆点 fraction 分式 progress 进度条 custom 自定义...
      纵向滚动分页器类型，可选fraction 分式 progress 进度条 custom 自定义...

## resize监听

swiper默认会监听浏览器窗口的变化,如果carousel组件需要监听父级容器的视口变化请添加resizeObserver属性

```
    <Carousel
      fillWays="backgroundFill"
      weId={`${this.props.weId || ''}_013hkd`}
      effect='fade'
      fadeEffect={
        { crossFade: true }
      }
      navigation
      loop
      autoHeight
      resizeObserver
    >
```
