New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF2+ IE8+ Opera 9+

Card Deck Slideshow

Author: Dynamic Drive

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.

 
  • "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:


 
  • "Manual" mode enabled.
  • Contents of slideshow defined inline on the page.
  • "Hinge" animation origin set to "top right".
  • Last content persistence on.
Example 3:
  • "Manual" mode enabled.
  • "Hinge" animation origin set to "50% 60%".
  • Contents of slideshow defined inside external file.

 

Directions: Developer's View

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

Select All

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:

Select All

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:

<div id="demo1" class="stackcontainer">

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

 <div class="inner">
  <img src="coconut.jpg" />
 </div>

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

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

</div>

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():

option Description
hingepoint: string

defaults to "top left"

 The point within the slideshow container where each slide "unhinges" to reveal the next one. Accepts any valid "x-axis y-axis" string value that CSS's transform-origin property accepts, such as "bottom left", "top right", "40% 50%" etc.
autplay: Boolean

defaults to false

 Boolean on whether slideshow should auto play when the page loads. If set to true, also configure "cycles" option below.
cycles: int

defaults to 2

 When autoplay is set to true, sets the number of complete cycles before the slideshow stops auto rotating. Set this option to 0 to have it run perpetually.
pause: int

defaults to 3000

 When autoplay is set to true, sets the pause in milliseconds between slide changes.
persist: Boolean

defaults to 3000

 Boolean on whether slideshow should persist within a browser session the last slide shown when the page is reloaded or navigated away from, and recall that slide to show upon return.
fxduration: int

defaults to 1200

 Sets the duration in milliseconds of the "unhinge" effect.
source: "string"

defaults to "inline"

 Dictates the source of the contents for the slideshow. If set to "inline" (default), they should be defined inline inside the slideshow container. Otherwise, set this option to the full path to the external file on your server (relative to the current page) where the same contents are defined inside:

var demo3 = new carddeckslideshow({
 id: 'demo3',
 hingepoint: '50% 60%',
 source: 'subdir/stackedcontents.txt',
 fxduration: 2000,
 pause: 1000
})

Regardless of where your contents are defined, they should consist of a series of HTML each wrapped around a <div class="inner"> container.
activeclass: "string"

defaults to "hinge"

 A CSS class that's added to the currently "unhinging" slide. Use it to add additional CSS styling to the presently swapped out slide, such as add a CSS shadow to give it a raised effect. See inside carddeckslideshow.css for the style currently added to the "hinge" class.
onunhinge: function() A callback function invoked at the end of each slide's unveiling to reveal a new slide, including when the very first slide is shown when the page first loads (with no animation). Use this function to add custom code to be called whenever a slide is shown. It is automatically passed the following two parameters for your convenience:
  • curindex: The index of the current slide being shown relative to its peers.
  • previndex: The index of the slide that has just been "unhinged" and hidden relative to its peers.

For example, the following makes use of the onunhinge() function to log to the console the current and previous slide's contents:

onunhinge:function(curindex, previndex){
 console.log( this.$contents.eq(curindex).html(), this.$contents.eq(preindex).html() )
}

As you can see then, the jQuery method this.$contents.eq(index) lets you access a particular slide based on its index (0 = 1st index, 1 = 2nd index) etc.
Method  
userplay() Plays the slideshow (so it rotates automatically).
userpause() Stops/ pauses a slideshow that's currently playing.
navigate(keyword) Lets you increment/ decrement or jump to a particular slide on demand. keyword can consist of one of the following:
  • "next": Moves the slideshow one slide forward.
  • "prev": Moves the slideshow one slide backwards.
  • index: Moves the slideshow to a particular slide, where 0 = 1st slide, 1 = 2nd slide etc.

If the slideshow is currently auto playing, calling navigate() will stop it.
getajaxcontent(url) Replaces whatever contents the slideshow is currently showing with those inside the external file as dictated by the url parameter. Reinitializes the slideshow and shows the newly fetched contents. For example:

<script type="text/javascript">

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

</script>

<a href="javascript:demo1.getajaxcontent('newcontents.txt')">Update slideshow with new contents</a>