fullPage.js Slideshow auto advance
HTML
<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<header id="header">
<ul class="nav">
<li data-menuanchor="home"> <a href="#home">home</a>
</li>
<li data-menuanchor="about"><a href="#about">about</a>
</li>
<li data-menuanchor="contact"><a href="#menu">contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="section0">
<div class="slide slideOne">first slide in slideshow</div>
<div class="slide slideTwo">second slide in slideshow</div>
<div class="slide slideThree">third slide in slideshow</div>
</div>
<div class="section" id="section1">second section</div>
<div class="section" id="section2">third section</div>
</div>
CSS
.slideOne {
background-color:#99CCFF;
}
.slideTwo {
background-color:#FF66FF;
}
.slideThree {
background-color:#00CC99;
}
#header {
width: 100%;
background-color: #42403c;
background: rgba(0, 0, 0, 0.7);
position: fixed;
height: 50px;
top: 0;
z-index: 99;
}
.nav li {
display:inline;
}
.nav li a {
color: #FFF;
font-size: 16px;
text-decoration: none;
}
.nav li a:hover {
color: #69b744;
}
JavaScript
var slideTimeout;
$('#fullpage').fullpage({
sectionsColor: ['#ccc', '#999', '#777'],
anchors: ['home', 'about', 'contact'],
animateAnchor: false,
menu: '.nav',
paddingTop: '50px',
verticalCentered: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
css3: true,
afterRender: function () {
//on page load, start the slideshow
slideTimeout = setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 3000);
},
onLeave: function (index, direction) {
//after leaving section 1 (home) and going anywhere else, whether scrolling down to next section or clicking a nav link, this SHOULD stop the slideshow and allow you to navigate the site...but it does not
if (index == '1') {
console.log('on leaving the slideshow/section1');
clearInterval(slideTimeout);
}
}
});