Add autoplay to jQuery slideshow

Question

Currently I have four pages that are full-width landing pages. I would like to add funcionality that will enable auto play. This will change the functionality to be more like a slideshow and less like static landing pages.

My current navigation for my landing pages has a " current navigation item selector;" here is my code for my current navigation that I'd like to add a jquery autoplay feature to:

$(document).ready(function() {
    /** nav selector **/
    var bodyid = $('body').attr('id');   
    $('nav a.'+ bodyid).addClass('active');
    $("body").css("display", "none");

    $("body").fadeIn(500);

    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(500, redirectPage);     
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Here is my HTML for the Nav:

Here is my CSS: nav { position:absolute; top:4%; left:10.45%;
} nav a { float:left; display: inline-block; width: 15px; height: 15px; margin: 0 7px; background: #fff; opacity: .85; border-radius: 999px; cursor: pointer; transition: all 150ms; } nav a:hover, nav a.active{ opacity:1; background:#007cc0; }

Taylor Taylor · Accepted Answer · 2013-07-10T20:26:50

For starters, you might consider using a iframe to wrap the landing pages so that some transport controls or navigation can remain constant for the user. Your current arrangement sounds like it might be confusing, but I don't know the purpose so...

I would suggest that you statically define the next page in the HTML of each landing page, then use setTimeout() to navigate to that location after a period of time.

A more sophisticated implementation would include a way to stop the autoplay.

var nextPage = "http://your_domain.com/landing_page_2.html"; // set in each page.
var autoPlayEnabled = true; // toggle this with a play/pause button of some kind.

function navToNext()
{
   if(autoPlayEnabled)
   {
       $("body").fadeOut(500, function(){ window.location = nextPage; });           
   }
}

setTimeout(navToNext, 5000); // five seconds

Add autoplay to jQuery slideshow

1 Answers