Description: This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each slide to show the next, similar to a stacked pile of cards. At the heart of it all, however, is a versatile slideshow that supports both auto and manual mode, persistence of the last viewed slide, inline or ajax content, and more. The "unhinge" effect works in all browsers that support CSS3 transform, namely, IE10, all modern versions of FF, Chrome, and Safari, including their mobile versions. In non supporting browsers (such as IE9), a standard slide down effect is employed instead. Lets list the essential features of this script now:

• Contents of the slideshow can be defined inline on the page as regular HTML markup, or inside an external file and fetched via Ajax.
• Contents of slideshow can be dynamically refreshed using Ajax, such as by loading a new content file every x minutes.
• Supports two different display modes- "auto" and "manual." In auto mode, slideshow pauses when the mouse rolls over the slideshow, and also, can be set to automatically stop after x cycles. In manual mode, custom controls can be created to dynamically move between slides, including play/ pause it.
• Supports persistence of last viewed slide within a browser session, so reloading the page recalls that slide.
• Customize the "unhinge" animation to either drop from the left or right side, or any origin relative to the slideshow for that matter. For browsers that don't support CSS3 animation (IE9 and below predominantly), a simpler "slide down" animation is used instead.
• An "onunhinge" event handler allows you to run custom code whenever a slide is unveiled.

Demos (responds to left/right arrow keys):

Default example: Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. The clear liquid coconut water within is a refreshing drink. Woodland is a low-density forest forming open habitats with plenty of sunlight and limited shade. Woodlands may support an understory of shrubs and herbaceous plants including grasses. Woodland may form a transition to shrubland under drier conditions. Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry. Previous Slide / Next Slide / Load Ajax Contents	"Auto" mode enabled, slideshow automatically stops after 2 cycles. "Hinge" animation origin set to "top left". Width of slideshow set to percentage value so it's flexible. Contents of slideshow defined inline on the page. Shows example of calling getajaxcontent() to repopulate slideshow with new content. Last content persistence off.
Example 2: Previous Slide | Next Slide / Play Slideshow / Stop	"Manual" mode enabled. Contents of slideshow defined inline on the page. "Hinge" animation origin set to "top right". Last content persistence on.
Example 3: Previous Slide / Next Slide	"Manual" mode enabled. "Hinge" animation origin set to "50% 60%". Contents of slideshow defined inside external file.

Directions:

Step 1: Insert the following code in the HEAD section of your page

The code above references one CSS file plus two external .js files, which you need to download below (right click/ select "Save As"):

1. carddeckslideshow.js
2. carddeckslideshow.css
3. stackedcontents.txt (sample external file used in the demo)

By default, upload these three files to the same directory as where your webpage resides.

Step 2: Insert the below sample code into the BODY section of your page:

It contains the HTML for the three demos you see above. That's it for installation! Lets move on to understanding how everything works.

HTML Markup of slideshow

To set up a card deck slideshow, first, define the HTML markup for it, which looks like the following:

It should consist of a master DIV container with an arbitrary but unique ID and a CSS class name of "stackcontainer".  Then, for each piece of content inside your slideshow, wrap it around with a inner DIV of CSS class "inner" (this class shouldn't be modified). Now, by default any content inside the ".inner" class will appear flush right up against its border, with no padding. To apply some padding, one way is to add another DIV container inside the ".inner" DIV:

 <div class="inner">
  <div>
  Your content here 2
  </div>
 </div>

Per the CSS defined inside carddeckslideshow.css, this will supply a padding of 8px to the content defined inside this DIV. If your content is simply an image, you probably don't want any padding around it, and hence should remove the DIV in red.

Now, if you wish to define the slideshow contents inside an external file (and fetched via Ajax by the script), you still need to define the outermost "stackcontainer" DIV literally on your page where you wish the slideshow to appear. However, for all the "inner" content DIVs, move them to an external file:

<div id="demo1" class="stackcontainer">
<!-- Contents of slideshow defined inside an external file -->
</div>

The contents are then defined inside an external file, and pointed to inside the corresponding initialization code (see below).

Calling the initialization code

Moving on, you now need to call the initialization function carddeckslideshow(options) to jump start your card deck slideshow. The format is:

<script type="text/javascript">

var demo1 = new carddeckslideshow({
 id: 'demo1',
 autoplay: true,
 cycles: 2,
 persist: false
 })

</script>

Notice the variable name in red (ie: demo1)- when initializing your slideshow, you should assign the result to an unique but arbitrary variable name for each instance of card deck slideshow on your page. This way you can then use this variable as the starting point to further manipulating the slideshow, by calling one of its methods.

Available Options for carddeckslideshow()

Lets look in detail now all the supported options at y our disposal when invoking carddeckslideshow():