1.0.7 • Published 4 years ago
cuberotate v1.0.7
install
npm install cuberotate --saveUsage
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