slidePage

slidePage現(xiàn)已推出3.0, 吸取了上一版本slidePage v2.1.1 的各種經驗，彌補不足，與v2.1.1不同的是移除了對jquery和zepto的依賴，精簡到只有一個js文件，優(yōu)化了接口調用方式，更適合主流的前端框架，另外還有基于vue的插件版本vue-slidePage和基于react的插件版本react-slidePage

Demo:

• simple
• animated
• scroll
• custom
• fullFeatured

Featured

slidePage3 特別適合主流前端框架開發(fā)，無任何依賴庫，源代碼只有12kb，Gzip壓縮后僅有2.4k, 接口符合插件具有的初始化、銷毀、重載的方法，適配PC和移動端，具有單屏內容滾動、手動播放動畫、動態(tài)重繪等特色功能，具體查看完整示例: fullFeatured

Documentation:

• Usage
  • Install slidePage
  • Including files
  • Required HTML structure
  • Initialization
• Configuration
• Options
• Using Animation
• Methods
  • slidepage.slideNext()
  • slidepage.slidePrev()
  • slidepage.slideTo(page)
  • slidepage.slideFile(page)
  • slidepage.destroy()
  • slidepage.update()

Usage

Install slidePage

// With npm
npm install slidePage

// With bower
bower install slidePage

Including files

<link rel="stylesheet" type="text/css" href="slidePage.css">

<script type="text/javascript" src="slidePage.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,
    useWheel: true,
    useSwipe: true,
    useAnimation : true,

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

Options

在slidePage中，page指的是每一次全屏滾動的一屏，也可以理解為每一屏對應的頁碼，必須是1以上的整數(shù)

Events

Using Animation

為了方便示例用animate.css，動畫效果可以自己實現(xiàn)

Include animate.css

<link rel="stylesheet" >

HTML structure

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

在想要動畫控制的元素上加上step類，并加上css動畫類名即可使用動畫，data-delay屬性控制動畫延時播放(默認為100毫秒);

手動觸發(fā)動畫

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

1. 在想要手動播放動畫的元素上加上lazy類，并加上css動畫類名即可使用動畫，可以加上data-delay使觸發(fā)時再延時播放;
2. 通過slidepage.slideFire(page)指定某一頁的lazy動畫觸發(fā)播放。

Methods

slidepage.slideNext()

滑動定位到下一屏

slidepage.slidePrev()

滑動定位到上一屏

slidepage.slideTo(page)

傳入page頁碼，滑動定位到對應的page

slidepage.slideFile(page)

觸發(fā)對應 page 的lazy手動動畫

slidepage.destroy()

銷毀當前實例，移除所有事件恢復class屬性值。

slidepage.update(newSlidePages)

當html里的page發(fā)生變化時需要執(zhí)行動態(tài)更新。

newSlidePages參數(shù)非必填，僅應對于初始化的時候slidePages參數(shù)傳入的是NodeList或HTMLCollection時才需要在更新的時候再傳一次變化后的DOM結構通知更新。

> 此方法非常適合現(xiàn)在流行的數(shù)據驅動型框架，當模型數(shù)據驅動改變pege的排列時，執(zhí)行update可以起到更新的作用，可以先看示例源碼了解：custom.html