node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

periodicjs.component.full-width-slideshow

component.full-width-slideshow

A very simple (framework independent) 100% width HTML slider that scales down to mobile. Added Touch & Swipe Support. Inspired by Responsive full width slideshow

API Documenation

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 periodicjs.component.full-width-slideshow

The full width slideshow component is a browserified javascript module.

Usage

JavaScript

var fullWidthSlideshow = require('periodicjs.component.full-width-slideshow'),
    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]/component.full-width-slideshow.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-cli

Then run grunt watch

$ grunt watch

For 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