FOLLOW US

Blog

AutoPlay Vertical – Without Horizontal AutoPlay

By 2 Comments
0 Flares 0 Flares ×

In this code example we are setting a SlideDeck to only AutoPlay through Vertical Slides and not Horizontal Slides. Instead of progressing to the next Horizontal Slide after completing its Vertical Cycle, we check to see if the last Vertical Slide is next and if so, pause the AutoPlay, progress to the first Vertical Slide and then resume AutoPlay. This will work for multiple Vertical Slides in a single Deck. We have set the clicking of the Vertical Navigation to cancel this AutoPlay, no ifs ands or buts.

<div id="slidedeck_frame" class="skin-slidedeck">
	<dl class="slidedeck">
		<dt>Slide 1</dt>
		<dd>
			<ul class="slidesVertical">
				<li><p><strong>Vertical Slide 1</strong></p></li>
				<li><p><strong>Vertical Slide 2</strong></p></li>
				<li><p><strong>Vertical Slide 3</strong></p></li>
				<li><p><strong>Vertical Slide 4</strong></p></li>
				<li><p><strong>Vertical Slide 5</strong></p></li>
			</ul>
		</dd>
		<dt>Slide 2</dt>
		<dd>Slide 2 content</dd>
		<dt>Slide 3</dt>
		<dd>Slide 3 content</dd>
		<dt>Slide 4</dt>
		<dd>Slide 4 content</dd>
		<dt>Slide 5</dt>
		<dd>Slide 5 content</dd>
	</dl>
</div>
<script type="text/javascript">
    var autoPlayInt = 2000;          // duration between slides
    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,
		hideSpines: false,
		complete: function(deck){
			if( typeof(deck.vertical().navChildren) != 'undefined' && 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
                // set a timer to go back to the start slide and then resume autoPlay.
    			parentDeck.pauseAutoPlay = true;
				setTimeout(function(){
    				deck.goTo(1);
    				parentDeck.pauseAutoPlay = false;
    			}, autoPlayInt - slideSpeed );
    		}
    	}
    });
    slideDeckSelector.find('.verticalSlideNav').click(function(){
		overrideAutoPlay = true;
    	parentDeck.pauseAutoPlay = true;
    });
</script>

Leave a Reply

Comments (2) Responses

  1.  

    la

    hi,

    while this seems to be working fine if I embed it in html (even customizable)..

    how could this be included in a separate js file?? and do we need to kick it off with a call?

    any precedence dependencies in the order of that include this file? (with the skin files I mean)

    thank you.

0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×