stylie.slideshows
v2.0.0
Published
A very simple (framework independent) 100% width HTML slider that scales down to mobile. Added Touch & Swipe Support. Inspired by http://tympanus.net/codrops/2013/02/26/full-width-image-slider/
Downloads
23
Maintainers
yawetseReadme
stylie.slideshows
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.slideshowsThe full width slideshow component is a browserified javascript module.
Usage
JavaScript
var fullWidthSlideshow = require('stylie.slideshows'),
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.slideshows.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