HTML JavaScript CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example/webpack
images
lib
src/styles
test
.babelrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
bower.json
bs-config.js
build.js
dev-server.js
package.json
prod.js
rollup.config.js
screenshot.gif
yarn.lock

README.md

Suwa

📖 Like a carousel element

screenshot

Install or Download

yarn add suwa
npm i -S suwa

Or access to releases page. Then, download the latest version.

Usage

First, if you read as a separate file

<script src="/path/tp/suwa.js"></script>
  <!-- ... -->
  <div id="target">
    <div class="page1" style="display:none">...</div>
    <div class="page2" style="display:none">...</div>
    <div class="page3" style="display:none">...</div>
    <div class="page." style="display:none">...</div>
    <div class="page." style="display:none">...</div>
    <div class="page." style="display:none">...</div>
    <div class="pageN" style="display:none">...</div>
  </div>
  <!-- ... -->
import Suwa from 'suwa';

window.addEventListener('load', () => {
  new Suwa({
    target: getElementById('target'),
    data: {
      style: {
        // defaults
        height: '50vh',
        width: '100vw',
        baseColor: '#fff',
        subColor: '#222',
        accentColor: '#cb1b45'
      },

      // Whether to display progressbar on top (default: false)
      progress: true,
      
      // Whether or not to loop a page (default: false)
      pagerLoop: {
        // Whether it will go automatically to the next page when it is left // alone, how many milliseconds it will go to the next page
        autoScroll: 3000,
      },

      // To operate with the keyboard Set
      // default: false
      keyMaps: {
        prevPage: 37,
        nextPage: 39
      },

      // Whether to move the page with the side-wheel (horizontal swipe on smart-device)
      // (default: false)
      wheel: true

      // Whether to display pager
      // defaults
      pager: {
        inset: true // If false Pager display outside the page
      },
    }
  });
})

Example

  • test/fixtures/index.js
  • example/webpack/index.js

LICENSE

The MIT License (MIT)

Copyright (c) 2017 nju33 nju33.ki@gmail.com