Author: | nju33 |
---|---|
Views Total: | 3,193 views |
Official Page: | Go to website |
Last Update: | March 24, 2017 |
License: | MIT |
Preview:

Description:
Suwa.js is a responsive, touch-enabled and fully customizable carousel component that enables you to endlessly slide through a group of DIV elements containing different background images.
Installation:
# Yarn yarn add suwa # NPM $ npm install suwa # Bower $ bower install suwa
How to use it:
Build the html structure for the background carousel.
<div id="app"> <div class="page1" style="display:none"> <h1><span>Page1</span></h1> </div> <div class="page2" style="display:none"> <h1><span>Page2</span></h1> </div> <div class="page3" style="display:none"> <h1><span>Page3</span></h1> </div> ... </div>
The required CSS styles for the slides.
[class^=page] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; }
Add your own background images to the slides:
.page1 { background-image: url(1.jpg); } .page2 { background-image: url(2.jpg); } .page3 { background-image: url(3.jpg); } ...
Initialize the background carousel with default settings.
new Suwa({ target: document.getElementById('app') });
Available carousel settings:
new Suwa({ target: document.getElementById('app'), 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 }, } });