@miclay/slidejs

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@miclay/slidejs
001.1.43 years ago3 years agoMinified + gzip package size for @miclay/slidejs in KB

Readme

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.