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.


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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.