/ Published in: HTML
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Include jQuery first. --> <!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. --> <link rel="stylesheet" type="text/css" href="slidedeck.skin.css" media="screen,handheld" /> <!-- Styles for the skin that only load for Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" /> <![endif]--> <!-- Include the SlideDeck jQuery script. --> <style type="text/css"> #slidedeck_frame { width: 901px; height: 300px; } </style> </head> <body> <div id="slidedeck_frame" class="skin-slidedeck"> <dl class="slidedeck"> <dd> <ul class="slidesVertical"> </ul> </dd> </dl> </div> <script type="text/javascript"> var autoPlayInt = 2000; // duration between slides var restartSlide = 4; // the horizontal slide we want to restart playback on var verticalSlide = 5; // the slide that is our "autoplay vertical slide" var slideSpeed = 500; // how fast do our slides slide? var overrideAutoPlay = false; // a special override to prevent autoPlay /* ------------------------------ */ /* Initiate the SlideDeck */ /* ------------------------------ */ // Define the selected deck, for later use. var slideDeckSelector = $('.skin-slidedeck dl.slidedeck'); // Create the SlideDeck, and assign it to the "parentDeck" variable for later use. var parentDeck = slideDeckSelector.slidedeck({ speed: slideSpeed, autoPlay: true, autoPlayInterval: autoPlayInt, before: function(deck){ /* Horizontal slide "before" function */ // before each horizontal slide animates, we do a check. if( verticalSlide == deck.current ){ // if the current slide is our user-defined vertical slide, pause autoPlay deck.pauseAutoPlay = true; } }, complete: function(deck){ /* Horizontal slide "complete" function */ // after each horizontal slide, we do two checks. if( deck.current == restartSlide && deck.pauseAutoPlay == false && overrideAutoPlay == false){ // if the current slide is our "restart slide" & autoPlay is not paused. deck.pauseAutoPlay = true; // set a timer to go back to the start slide and then resume autoPlay. setTimeout(function(){ deck.goTo(1); deck.pauseAutoPlay = false; }, autoPlayInt - slideSpeed ); } if( verticalSlide == deck.current && overrideAutoPlay == false){ // if we're on our user-defined vertical slide & the autoPlay override is not set. deck.pauseAutoPlay = false; } } }); parentDeck.vertical({ complete: function(deck){ /* Vertical slide "complete" function */ // after each vertical slide, let's do yet another check. if( ( deck.current + 1 ) == deck.slides.length && overrideAutoPlay == false ){ // if we're on the last vertical slide & the autoPlay override is not set, // set a timer to go back to the start slide and then resume autoPlay. setTimeout(function(){ deck.goTo(1); parentDeck.pauseAutoPlay = false; }, autoPlayInt - slideSpeed ); } } }); slideDeckSelector.find('.verticalSlideNav').click(function(){ // let's prevent autoPlay after a verticalNav element is clicked on. // kill all autoPlay no if ands or buts! overrideAutoPlay = true; parentDeck.pauseAutoPlay = true; }); </script> <!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! --> <noscript> </noscript> </body> </html>