SlidePage NPM | npm.io

slidePage

Demo:

Featured

slidePage3 特别适合主流前端框架开发，无任何依赖库，Gzip压缩后仅有2.4k, 接口符合插件具有的初始化、销毁、重载的方法，适配PC和移动端，可实现内容超出屏幕滚动、手动播放动画、动态更新等特色功能，具体查看完整示例: fullFeatured

Documentation:

Usage

Including files

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lipten/slidePage/dist/slidePage.min.css">

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lipten/slidePage/dist/slidePage.min.js"></script>

Required HTML structure

<div class="slide-container" id="slide-container">
    <div class="slide-page page1">
      <div class="container">
        <h2>page1</h2>
        <p>page1 content</p>
      </div>
    </div>
    <div class="slide-page page2">
      <div class="container">
        <h2>page2</h2>
        <p>page2 content</p>
      </div>
    </div>
</div>

您可以查看完整examples里的html文件结构 fullFeatured.html

Initialization

new slidePage()

Configuration

var slidepage = new slidePage({
    slideContainer: '#slide-container',
    slidePages: '.slide-item',
    page: 1,
    refresh: true,
    dragMode: false,
    useWheel: true,
    useSwipe: true,
    useAnimation : true,

    // Events
    before: function(origin,direction,target){},
    after: function(origin,direction,target){},
 });

Options

在slidePage中，page指的是每一次全屏滚动的一屏，也可以理解为每一屏对应的页码，必须是1以上的整数

Events

Using Animation

为了方便示例用animate.css，动画效果可以自己实现

Include animate.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

HTML structure

<div class="step animated fadeIn" data-delay="1300"></div>;

在想要动画控制的元素上加上step类，并加上css动画类名即可使用动画，data-delay属性控制动画延时播放(默认为100毫秒);

手动触发动画

<div class="lazy animated fadeIn"></div>

在想要手动播放动画的元素上加上lazy类，并加上css动画类名即可使用动画，可以加上data-delay使触发时再延时播放;
通过slidepage.slideFire(page)指定某一页的lazy动画触发播放。

Drag Mode

最新加入的拖动滑屏模式，在实例化时传入配置dragMode: true，即可开启，此功能目前为测试阶段，请酌情使用。

现已加入Demo系列豪华套餐：

dragMode

需要注意的是，为了滑动松手后的动画体验更好，记得在你的项目里设置过渡动画类.slide-container .slide-page.transition，调整过渡函数和时长。具体查看示例代码：https://github.com/lipten/slidePage/blob/master/examples/drag.html#L13