1.0.1 • Published 6 years ago
carousel-animation-effects v1.0.1
carousel-animation-effects
一个轮播动画特效的库
Usage
<div id="carousel-container" class="carousel-container">
<div id="carousel-wrap" class="carousel-wrap">
<div class="carousel-item">
<div class="carousel-img-1 carousel-img"></div>
</div>
<div class="carousel-item">
<div class="carousel-img-2 carousel-img"></div>
</div>
<div class="carousel-item">
<div class="carousel-img-3 carousel-img"></div>
</div>
<div class="carousel-item">
<div class="carousel-img-4 carousel-img"></div>
</div>
</div>
</div>
let carouselInstance = new Carousel(document.getElementById('carousel-container'), {
autoPlay: true, // 自动播放
currentIndex: 0, // 开始的帧数
speed: 1500, // 切换的速度
duration: 4000, // 停留的时间
dots: true, // 是否开启圆点切换
arrows: true, // 是否开启箭头切换
effectIndex: 1, // 切换的效果
// 1:淡入淡出, 2:水平滑动, 3:垂直滑动, 4:水平翻转,
// 5:垂直翻转, 6:水平 3D 翻转, 7:垂直 3D 翻转, 8: 淡入放大,
// 9:水平魔方旋转, 10:垂直魔方旋转, 11:聚焦, 12:分区聚焦,
// 13:顺时针风车, 14:逆时针风车
});
API
props
Development
npm install
npm run start
License
carousel-animation-effects is released under the MIT license.