This repository is a mirror of the component module jh3y/display. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/jh3y-display. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.

An animated display reel component for displaying information such as forms, pictures, media etc.

You can see a demo of display here. It's using a basic side to side theme and a swipe navigation extension.

Install with component(1):

$ component install jh3y/display

You can use display with the component package manager or standalone by simply adding display.js to your project.

var display = require('display'); //THIS IS ONLY NEEDED IF USING THE NON STANDALONE VERSION
var element = document.querySelector('someElement')
var myDisplay = new display(element);

To use display, you need to provide the following structure

div //becomes the display, this is the element you pass in.
	div //becomes a display panel
	div //becomes a display panel
	div //becomes a display panel

Once you've created a display, you need a theme for it so it actually renders. There are a selection of themes available or you can create your own. Currently, available themes are based around being responsive to display height and width so a height and width MUST be set for your display.

###next()

Moves the display to the next panel of content.

###previous()

Moves the display to the previous panel of content.

##Themes

There are some themes available already for display. They all have demos and instructions. Using themes is easy. You simply add the theme class to your display and include the theme CSS in your project. You can see this in the demo, that side-slide is added to display and the relevant CSS has been included.

• side-slide: side sliding theme.
• top-slide: top sliding theme.
• merry-go-round: carousel theme.
• vertical-carousel: vertical version of the carousel theme.
• scaled-gallery: scaling gallery style theme.
• scaled-gallery-less: reduced version of the scaling gallery style theme.
• bridge: rotating style theme that looks like a bridge.

##Extensions

There are also extensions available for display. They all have demos and instructions. To use an extension you simply include the extension file after including display.

• swipe-navigation: provides horizontal swipe navigation on touch devices such as mobile.
• scroll-navigation: provides vertical scroll navigation on touch devices such as mobile.

##Example Usage

• form: An example of a form being presented with display.
• video gallery: An example video gallery of some funny dance lessons.

##Contributing

Please do!

Any feedback is very welcome and if you have a theme or extension you would like added that would be awesome. Just submit a pull request with the updated readme.

MIT