Package Exports

@champkeh/slide-page

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@champkeh/slide-page) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SlidePage

说明：该仓库是fork自 https://github.com/lipten/slidePage, 为了适合自己的项目fork了一份进行魔改

魔改的内容

采用现代js库(npm包)的封装方法
非标准的mousewheel事件替换为标准的wheel事件
采用rollup代替glup作为构建工具

Demo:

Featured

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

Documentation:

Usage
Configuration
Options
Using Animation
Methods
Troubleshooting(常见问题汇总)

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以上的整数

name	type	default	description
slideContainer	String\|Element	'.slide-container'	指定slidePage要运行的容器选择器或元素
slidePages	String\|NodeList\|HTMLCollection	'.slide-page'	指定`slideContainer`容器里每个page的选择器或元素
page	Number	1	首次进入的page页码
dragMode	Boolean	false	💡移动端开启触控拖动滑屏模式(此功能还在测试阶段)，默认为false，前提是`useSwipe: true`
useAnimation	Boolean	true	是否开启动画
refresh	Boolean	true	每次滚动进入是否重新执行动画
useWheel	Boolean	true	是否开启鼠标滚轮滑动
useSwipe	Boolean	true	是否开启移动端触控滑动

Events

name	description
before	每次全屏滚动前触发事件，回调三个参数(origin, direction, target)，分别是滚动前的page序号、方向('next'\|'prev')、滚动后的page序号
after	每次全屏滚动后触发事件，回调三个参数(origin, direction, target)，参数释义同上

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

Methods

slidepage.slideNext()

滑动定位到下一屏

slidepage.slidePrev()

滑动定位到上一屏

slidepage.slideTo(page)

传入page页码，滑动定位到对应的page

slidepage.slideFire(page)

触发对应 page 的lazy手动动画

slidepage.destroy()

销毁当前实例，移除所有事件恢复class属性值。

slidepage.update(newSlidePages)

当html里的page发生变化时需要执行动态更新。

newSlidePages参数非必填，仅应对于初始化的时候slidePages参数传入的是NodeList或HTMLCollection时才需要在更新的时候再传一次变化后的DOM结构通知更新。

此方法非常适合现在流行的数据驱动型框架，当模型数据驱动改变pege的排列时，执行update可以起到更新的作用，可以先看示例源码了解：custom.html

Contributing

development

本地运行

npm install
npm run server

构建

npm run build