# @ctmobile/ui-revolving

> 支持移动端的UI组件-Revolving

Latest version **1.0.1** (published 2019-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ctmobile/ui-revolving
pnpm add @ctmobile/ui-revolving
yarn add @ctmobile/ui-revolving
bun add @ctmobile/ui-revolving
```

## 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.1 |
| Published | 2019-09-18 |
| First published | 2019-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 165.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | playerljc |
| Maintainers | playerljc |
| Keywords | revolving, CtMobile, CTMibole-UI, mobile, webapp, SPA, Hybrid, Cordova, Android, iOS, Material, playerljc, WebFramework |

## Links

- npm: https://www.npmjs.com/package/@ctmobile/ui-revolving
- Repository: https://github.com/playerljc/CTMobile-UI
- Homepage: https://github.com/playerljc/CTMobile-UI#readme
- Issues: https://github.com/playerljc/CTMobile-UI/issues
- npm.io page: https://npm.io/package/@ctmobile/ui-revolving

## Dependencies (2)

- [swiper](https://npm.io/package/swiper.md) ^4.4.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-09-18
- 1.0.0 — 2019-07-19

## README

# Revolving

* [基本布局](#revolving-layout)
* [初始化](#revolving-initial)
* [例子](#revolving-demo)
* [方法](#revolving-methods)
* [事件](#revolving-events)
  - [autoplayStart](#revolving-events-autoplaystart)
  - [autoplayStopEvent](#revolving-events-autoplaystopevent)
  - [autoplay](#revolving-events-autoplay)

## 基本布局

```

<div class="ct-revolving">
  <div class="ct-revolving-wrapper">
      <div class="ct-revolving-slide">Slide 1</div>
      ...
  </div>
</div>

```

* ct-revolving - 整体容器
  - ct-revolving-wrapper - 滚动项包装容器
    + ct-revolving-slide - 滚动项(多个)

## 初始化

```

import Revolving from '@ctmobile/ui-revolving';
import '@ctmobile/ui-revolving/lib/revolving.less';

const revolving = new Revolving(
  document.getElementById('ct-revolving'), {
    delay: 3000,
    direction: 'top',
  }
);

revolving.on('autoplayStart', () => { console.log('autoplayStart'); });
revolving.on('autoplayStopEvent', () => { console.log('autoplayStopEvent'); });
revolving.on('autoplay', () => { console.log('autoplay'); });

```

|  名称 |  说明 |
| --- | --- |
| {HtmlElement} - el |  整体元素 |
| {object} - config |

配置

speed {number} - 幻灯片之间的过渡持续时间（毫秒）

delay {number} - 转换之间的延迟（以ms为单位）

direction {string} - [left | right | top | bottom] 滚动方向

loop {boolean} - 是否循环播放

stopOnLastSlide {boolean} - 启用此参数并在到达最后一张幻灯片时停止自动播放（在循环模式下无效）  |

## 例子

#### html

```

<dl>
          <dt>direction - left</dt>
          <dd>
            <div class="ct-revolving" id="ct-revolving-left">
              <div class="ct-revolving-wrapper">
                <div class="ct-revolving-slide">Slide 1</div>
                <div class="ct-revolving-slide">Slide 2</div>
                <div class="ct-revolving-slide">Slide 3</div>
                <div class="ct-revolving-slide">Slide 4</div>
                <div class="ct-revolving-slide">Slide 5</div>
                <div class="ct-revolving-slide">Slide 6</div>
                <div class="ct-revolving-slide">Slide 7</div>
                <div class="ct-revolving-slide">Slide 8</div>
                <div class="ct-revolving-slide">Slide 9</div>
                <div class="ct-revolving-slide">Slide 10</div>
              </div>
            </div>
          </dd>
        </dl>

<dl>
  <dt>direction - right</dt>
  <dd>
    <div class="ct-revolving" id="ct-revolving-right">
      <div class="ct-revolving-wrapper">
        <div class="ct-revolving-slide">Slide 1</div>
        <div class="ct-revolving-slide">Slide 2</div>
        <div class="ct-revolving-slide">Slide 3</div>
        <div class="ct-revolving-slide">Slide 4</div>
        <div class="ct-revolving-slide">Slide 5</div>
        <div class="ct-revolving-slide">Slide 6</div>
        <div class="ct-revolving-slide">Slide 7</div>
        <div class="ct-revolving-slide">Slide 8</div>
        <div class="ct-revolving-slide">Slide 9</div>
        <div class="ct-revolving-slide">Slide 10</div>
      </div>
    </div>
  </dd>
</dl>

<dl>
  <dt>direction - top</dt>
  <dd>
    <div class="ct-revolving" id="ct-revolving-top">
      <div class="ct-revolving-wrapper">
        <div class="ct-revolving-slide">Slide 1</div>
        <div class="ct-revolving-slide">Slide 2</div>
        <div class="ct-revolving-slide">Slide 3</div>
        <div class="ct-revolving-slide">Slide 4</div>
        <div class="ct-revolving-slide">Slide 5</div>
        <div class="ct-revolving-slide">Slide 6</div>
        <div class="ct-revolving-slide">Slide 7</div>
        <div class="ct-revolving-slide">Slide 8</div>
        <div class="ct-revolving-slide">Slide 9</div>
        <div class="ct-revolving-slide">Slide 10</div>
      </div>
    </div>
  </dd>
</dl>

<dl>
  <dt>direction - bottom</dt>
  <dd>
    <div class="ct-revolving" id="ct-revolving-bottom">
      <div class="ct-revolving-wrapper">
        <div class="ct-revolving-slide">Slide 1</div>
        <div class="ct-revolving-slide">Slide 2</div>
        <div class="ct-revolving-slide">Slide 3</div>
        <div class="ct-revolving-slide">Slide 4</div>
        <div class="ct-revolving-slide">Slide 5</div>
        <div class="ct-revolving-slide">Slide 6</div>
        <div class="ct-revolving-slide">Slide 7</div>
        <div class="ct-revolving-slide">Slide 8</div>
        <div class="ct-revolving-slide">Slide 9</div>
        <div class="ct-revolving-slide">Slide 10</div>
      </div>
    </div>
  </dd>
</dl>

<dl>
  <dt>speed - 过度时间</dt>
  <dd>
    <div class="ct-revolving" id="ct-revolving-speed">
      <div class="ct-revolving-wrapper">
        <div class="ct-revolving-slide">Slide 1</div>
        <div class="ct-revolving-slide">Slide 2</div>
        <div class="ct-revolving-slide">Slide 3</div>
        <div class="ct-revolving-slide">Slide 4</div>
        <div class="ct-revolving-slide">Slide 5</div>
        <div class="ct-revolving-slide">Slide 6</div>
        <div class="ct-revolving-slide">Slide 7</div>
        <div class="ct-revolving-slide">Slide 8</div>
        <div class="ct-revolving-slide">Slide 9</div>
        <div class="ct-revolving-slide">Slide 10</div>
      </div>
    </div>
  </dd>
</dl>

<dl>
  <dt>delay - 转换时间</dt>
  <dd>
    <div class="ct-revolving" id="ct-revolving-delay">
      <div class="ct-revolving-wrapper">
        <div class="ct-revolving-slide">Slide 1</div>
        <div class="ct-revolving-slide">Slide 2</div>
        <div class="ct-revolving-slide">Slide 3</div>
        <div class="ct-revolving-slide">Slide 4</div>
        <div class="ct-revolving-slide">Slide 5</div>
        <div class="ct-revolving-slide">Slide 6</div>
        <div class="ct-revolving-slide">Slide 7</div>
        <div class="ct-revolving-slide">Slide 8</div>
        <div class="ct-revolving-slide">Slide 9</div>
        <div class="ct-revolving-slide">Slide 10</div>
      </div>
    </div>
  </dd>
</dl>

<dl>
  <dt>api控制</dt>
  <dd>
    <div class="ct-revolving" id="ct-revolving-api">
      <div class="ct-revolving-wrapper">
        <div class="ct-revolving-slide">Slide 1</div>
        <div class="ct-revolving-slide">Slide 2</div>
        <div class="ct-revolving-slide">Slide 3</div>
        <div class="ct-revolving-slide">Slide 4</div>
        <div class="ct-revolving-slide">Slide 5</div>
        <div class="ct-revolving-slide">Slide 6</div>
        <div class="ct-revolving-slide">Slide 7</div>
        <div class="ct-revolving-slide">Slide 8</div>
        <div class="ct-revolving-slide">Slide 9</div>
        <div class="ct-revolving-slide">Slide 10</div>
      </div>
    </div>

    <div>
      <a class="ctmobile-ui-demo-button" id="startRevolving">start</a>
      <a class="ctmobile-ui-demo-button" id="stopRevolving">stop</a>
    </div>
  </dd>
</dl>
```

#### js

```

import Revolving from '@ctmobile/ui-revolving';
import '@ctmobile/ui-revolving/revolving.less';

const leftRevolving = Revolving(
document.getElementById('ct-revolving-left'), {
  direction: 'left',
});

const rightRevolving = Revolving(
document.getElementById('ct-revolving-right'), {
  direction: 'right',
});

const topRevolving = Revolving(
document.getElementById('ct-revolving-top'), {
  direction: 'top',
});

const bottomRevolving = Revolving(
document.getElementById('ct-revolving-bottom'), {
  direction: 'bottom',
});

const speedRevolving = Revolving(
document.getElementById('ct-revolving-speed'), {
  speed: 1000 * 3,
});

const delayRevolving = Revolving(
document.getElementById('ct-revolving-delay'), {
  delay: 1000 * 3,
});

const apiRevolving = Revolving(
  document.getElementById('ct-revolving-api')
);

document.getElementById('startRevolving').addEventListener('click', () => {
  apiRevolving.start();
});

document.getElementById('stopRevolving').addEventListener('click', () => {
  apiRevolving.stop();
});
```

## 方法

start - 播放

stop - 暂停播放

isRunning - 是否进行播放

on( type, handler, ) - 注册事件

* type-string 事件类型
* handler-Function 事件句柄

## 事件

|  名称 |  说明 |
| --- | --- |
| autoplayStart |  自动播放开始时将触发事件 |
| autoplayStopEvent |  自动播放停止时将触发事件 |
| autoplay |  使用自动播放更改幻灯片时将触发事件 |

```

import Revolving from '@ctmobile/ui-revolving';
import '@ctmobile/ui-revolving/lib/revolving.less';

const revolving = Revolving(
  document.getElementById('ct-revolving'), {
    delay: 3000,
    direction: 'top',
  }
);

revolving.on('autoplayStart', () => { console.log('autoplayStart'); });
revolving.on('autoplayStopEvent', () => { console.log('autoplayStopEvent'); });
revolving.on('autoplay', () => { console.log('autoplay'); });

```

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