@miclay/slidejs

slidejs

SlideJS实现分屏滚动功能，不依赖任何第三方库

How to use?

<script src="../lib/index.js"></script>
<script>
  var slider = new SlideJS({
    parentSelector: '.slid-box', // 父容器的selector
    itemSelector: '.slid-item', // 每一屏的selector，确保为parentSelector下的子元素
    itemDocSelector: '.box', // 每一屏内容文档(自适应高度)的selector，非必填，默认为itemSelector的子元素
    width: 800, // 宽度，默认取值为window.innerWidth
    height: 500, // 高度，默认取值为window.innerHeight
    transitionDuration: 500, // 翻屏动画时间，单位毫秒ms，默认值为500
    transitionTimingFunction: 'ease', // 翻屏动画缓动函数，默认值为ease
    transitionDelay: 0, // 翻屏动画过渡效果延时，单位毫秒ms，默认值为0
    activeIndex: 0, // 当前展示第几屏，从0开始，默认值为0
    loop: false, // 是否循环翻屏，默认值为false
    scrollSensitivity: 300, // 滑屏敏感度，默认300ms
    beforeSlide: function(prevIndex, nextIndex) {
      // return 'stop';
    },
    afterSlide: function(prevIndex, nextIndex) {
      console.log(prevIndex, nextIndex);
    }
  });

  // 调用实例上的方法
  // slider.slidePrev(); // 翻到上一屏
  // slider.slideNext(); // 翻到下一屏
  // slider.slideTo(N); // 翻到第N屏，N从0开始计算
</script>