# cuberotate

> imgage 3d transform effect

Latest version **1.0.7** (published 2020-06-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install cuberotate
pnpm add cuberotate
yarn add cuberotate
bun add cuberotate
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-06-22 |
| First published | 2020-06-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kuangdong |
| Maintainers | kuangdong |
| Keywords | javascript |

## Links

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

## Recent versions

- 1.0.7 (latest) — 2020-06-22
- 1.0.6 — 2020-06-20
- 1.0.5 — 2020-06-18
- 1.0.4 — 2020-06-18
- 1.0.3 — 2020-06-17
- 1.0.2 — 2020-06-17
- 1.0.1 — 2020-06-17
- 1.0.0 — 2020-06-17

## README

#### install

```
npm install cuberotate --save
```

#### Usage

##### HTML content

```
<div class="box_rotate boxContainer">
    <ul>
        <li><img src="imageAddress"/></li>
        <li><img src="imageAddress"/></li>
        <li><img src="imageAddress"/></li>
        <li><img src="imageAddress"/></li>
    </lu>
</div>
```

##### javascript

```
import cubeRotate from 'cuberotate';
var options={direct:"v",autoPlay:true,transitionComplete:imgChagnedHandler}
var cube=new cubeRotate(".boxContainer",options);
function imgChangeHandler(imgIndex){
    console.info(“index=",imgIndex);
}
cube.next();
```

##### OPTIONS

| key                | defaultValue |                                                              |
| ------------------ | ------------ | ------------------------------------------------------------ |
| cubeNum            | 4            | image cube number                                            |
| autoPlay           | false        | Auto play or not                                             |
| playTime           | 4000         | Auto play time interval                                      |
| direct             | h            | image cube rotate direct that has two value(h or v)          |
| cubeRandom         | false        | image cube number Random generation                          |
| lowLeve            | false        | not 3D effect(Compatible with IE browser)                    |
| onReady            | null         | a callback function .This function is called after the images are loaded |
| transitionComplete | null         | a callback function. This function is called after the image is moved |

##### INTERFACE

```
1 cube.next();//Switch to the next image
2 cube.prev();//Switch to previous image
3 cube.setIndex(index);//Set index for toggle image
4 cube.setCubeNum(number);//Set the number of rotating blocks
5 cube.setCubeDirect(direct);//direct value is "h" or "v"
6 cube.getIndex();//return value is index
```

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