Advanced Search

Demo SlideDeck HTML & JavaScript Code for Brian

/ Published in: HTML
Save to your folder(s)
I'm using the callback functions to turn autoPlay on and off.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 		<title>SlideDeck v.1.2.0 Pro Example</title>
  6.  
  7.         <!-- Include jQuery first. -->
  8. 		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  9.  
  10.         <!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
  11.         <script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.min.js"></script>
  12.  
  13. 		<link rel="stylesheet" type="text/css" href="slidedeck.skin.css" media="screen,handheld" />
  14.         <!-- Styles for the skin that only load for Internet Explorer -->
  15.         <!--[if IE]>
  16.         <link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
  17.         <![endif]-->
  18.  
  19.         <!-- Include the SlideDeck jQuery script. -->
  20. 		<script type="text/javascript" src="slidedeck.jquery.js"></script>
  21.  
  22.         <style type="text/css">
  23.             #slidedeck_frame {
  24.                 width: 901px;
  25.                 height: 300px;
  26.             }        
  27.         </style>
  28. 	</head>
  29. 	<body>
  30. 		<div id="slidedeck_frame" class="skin-slidedeck">
  31. 			<dl class="slidedeck">
  32. 				<dt>Slide 1</dt>
  33. 				<dd>Slide content</dd>
  34. 				<dt>Slide 2</dt>
  35. 				<dd>Slide content</dd>
  36. 				<dt>Slide 3</dt>
  37. 				<dd>Slide content</dd>
  38. 				<dt>Slide 4</dt>
  39. 				<dd>Slide content</dd>
  40. 				<dt>Slide 5</dt>
  41. 				<dd>
  42.                     <ul class="slidesVertical">
  43.                         <li><p><strong>Vertical Slide 1</strong></p></li>
  44.                         <li><p><strong>Vertical Slide 2</strong></p></li>
  45.                         <li><p><strong>Vertical Slide 3</strong></p></li>
  46.                         <li><p><strong>Vertical Slide 4</strong></p></li>
  47.                         <li><p><strong>Vertical Slide 5</strong></p></li>
  48.                     </ul>
  49. 				</dd>
  50. 			</dl>
  51. 		</div>
  52.  
  53.         <script type="text/javascript">
  54.             var autoPlayInt = 2000;          // duration between slides
  55.             var restartSlide = 4;            // the horizontal slide we want to restart playback on
  56.             var verticalSlide = 5;           // the slide that is our "autoplay vertical slide"
  57.             var slideSpeed = 500;            // how fast do our slides slide?
  58.             var overrideAutoPlay = false;    // a special override to prevent autoPlay
  59.  
  60.             /* ------------------------------ */
  61.             /*     Initiate the SlideDeck     */
  62.             /* ------------------------------ */
  63.             // Define the selected deck, for later use.
  64.             var slideDeckSelector = $('.skin-slidedeck dl.slidedeck');
  65.  
  66.             // Create the SlideDeck, and assign it to the "parentDeck" variable for later use.
  67.             var parentDeck = slideDeckSelector.slidedeck({
  68.             	speed: slideSpeed,
  69.             	autoPlay: true,
  70.             	autoPlayInterval: autoPlayInt,
  71.             	before: function(deck){
  72.                     /* Horizontal slide "before" function */
  73.                     // before each horizontal slide animates, we do a check.
  74.             		if( verticalSlide == deck.current ){
  75.                         // if the current slide is our user-defined vertical slide, pause autoPlay
  76.             			deck.pauseAutoPlay = true;
  77.             		}
  78.             	},
  79.             	complete: function(deck){
  80.                     /* Horizontal slide "complete" function */
  81.                     // after each horizontal slide, we do two checks.
  82.             		if( deck.current == restartSlide && deck.pauseAutoPlay == false && overrideAutoPlay == false){
  83.                         // if the current slide is our "restart slide" & autoPlay is not paused.
  84.             			deck.pauseAutoPlay = true;
  85.                         // set a timer to go back to the start slide and then resume autoPlay.
  86.             			setTimeout(function(){
  87.             				deck.goTo(1);
  88.             				deck.pauseAutoPlay = false;
  89.             			}, autoPlayInt - slideSpeed );
  90.             		}
  91.             		if( verticalSlide == deck.current && overrideAutoPlay == false){
  92.                         // if we're on our user-defined vertical slide & the autoPlay override is not set.
  93.             			deck.pauseAutoPlay = false;
  94.             		}
  95.             	}
  96.             });
  97.             parentDeck.vertical({
  98.             	complete: function(deck){
  99.                     /* Vertical slide "complete" function */
  100.                     // after each vertical slide, let's do yet another check.
  101.             		if( ( deck.current + 1 ) == deck.slides.length && overrideAutoPlay == false ){
  102.                         // if we're on the last vertical slide & the autoPlay override is not set,
  103.                         // set a timer to go back to the start slide and then resume autoPlay.
  104.             			setTimeout(function(){
  105.             				deck.goTo(1);
  106.             				parentDeck.pauseAutoPlay = false;
  107.             			}, autoPlayInt - slideSpeed );
  108.             		}
  109.             	}
  110.             });
  111.             slideDeckSelector.find('.verticalSlideNav').click(function(){
  112.                 // let's prevent autoPlay after a verticalNav element is clicked on.
  113.             	// kill all autoPlay no if ands or buts!
  114.             	overrideAutoPlay = true;
  115.             	parentDeck.pauseAutoPlay = true;
  116.             });
  117.         </script>
  118.         <!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
  119.         <noscript>
  120.              <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
  121.         </noscript>
  122. 	</body>
  123. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.