2.0.0 • Published 9 years ago
stylie.tables v2.0.0
stylie.tables
A very simple (framework independent) 100% width HTML slider that scales down to mobile. Added Touch & Swipe Support. Inspired by Responsive full width slideshow
Example
Check out example/index.html, the example javascript for the example page is resources/js/example_src.js
Installation
$ npm install stylie.tablesThe full width slideshow component is a browserified javascript module.
Usage
JavaScript
var fullWidthSlideshow = require('stylie.tables'),
mySlideshow;
//initialize nav component after the dom has loaded
window.addEventListener('load',function(){
var tabelement = document.getElementById(tabelement);
mySlideshow = new fullWidthSlideshow({element:'myslideshow'});
});HTML
<html>
<head>
<title>Your Page</title>
<link rel="stylesheet" type="text/css" href="[path/to]/stylie.tables.css">
<script src='[path/to/browserify/bundle].js'></script>
</head>
<body>
<div id="myslideshow" class="myslideshow p_c_fws-slideshow p_c_fws-slideshow-preview">
<ul>
<li>
slideshow slide 1, this can be any html
</li>
<li>
slideshow slide 2, anything can go here
</li>
<li>
slideshow slide 3
</li>
</ul>
</div>
<!-- /content -->
</div>
<!-- /tabs -->
</body>
</html>##API
mySlideshow.jump(3); //jump to slideshow at slide '3'
mySlideshow.navigate('next'); //jump to next slide##Development Make sure you have grunt installed
$ npm install -g grunt-cliThen run grunt watch
$ grunt watchFor generating documentation
$ grunt doc
$ jsdoc2md lib/**/*.js index.js > doc/api.md##Notes
- The Tab Module uses Node's event Emitter for event handling.
- The Template Generator uses EJS, but you can generate your own mark up
- The less file is located in
resources/stylesheets