css-transition-slide

Installation

npm install css-transition-slide --save

Usage

var Slide = require('css-transition-slide');
var slide = new Slide(options);

• options
  • el 挂载元素
  • duration 轮播动画时间，默认400ms
  • delay 开始轮播延迟时间，默认4000ms
  • interval 轮播间隔时间，默认4000ms
  • auto 自动轮播，默认false
  • loop 支持循环轮播，默认true
  • slideStart 轮播之前开始执行的函数
  • slideEnd 轮播之后开始执行的函数

---

• methods
  • prev() 滑动到上一屏
  • next() 滑动到下一屏
  • slideTo(index) 滑动到指定屏，index从1开始

Example

<div class="slide-component">
    <div class="slide-items flex-row-box">
        <div class="slide-item">第一屏</div>
        <div class="slide-item">第二屏</div>
        <div class="slide-item">第三屏</div>
        <div class="slide-item">第四屏</div>
    </div>
</div>

var Slide = require('css-transition-slide');
var slide = new Slide({
    el: document.querySelector('.slide-component'),
    auto: true
});
 
// console.log(slide.slide.index); // 当前屏索引，从1开始
// console.log(slide.slide.length); // 屏数