Skip to content
简单、跨平台、无依赖的全屏滚动H5插件,可实现内容超出屏幕滚动、动态更新等特色功能
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
index.html
package.json
server.js
slidePage.css
slidePage.js
yarn.lock

README.md

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

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

Drag Mode

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

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

需要注意的是,为了滑动松手后的动画体验更好,记得在你的项目里设置过渡动画类.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参数传入的是NodeListHTMLCollection时才需要在更新的时候再传一次变化后的DOM结构通知更新。

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

Contributing

development

本地运行

npm install
npm run server

构建

npm run build
You can’t perform that action at this time.