I have a big problem. Using sequence.js And created my structure. It’s working:
<script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: false,
nextButton: true,
prevButton: true,
preloader: false,
transitionThreshold: false,
cycle: false,
hashTags: true,
preloader: true,
fadeFrameWhenSkipped: false,
waitForAnimationToComplete: true,
navigationSkipThreshold: 100,
navigationSkip: false,
}
var sequence = $("#sequence").sequence(options).data("sequence");
sequence.afterLoaded = function(){
$("#nav").fadeIn(500);
$("#nav li:nth-child("+(sequence.settings.startingFrameID)+") a").addClass("active");
}
sequence.beforeNextFrameAnimatesIn = function(){
$("#nav li:not(:nth-child("+(sequence.nextFrameID)+")) a").removeClass("active");
$("#nav li:nth-child("+(sequence.nextFrameID)+") a").addClass("active");
}
$("#nav li").click(function(){
if(!sequence.active){
$(this).children("a").removeClass("active").children("a").addClass("active");
sequence.nextFrameID = $(this).index()+1;
sequence.goTo(sequence.nextFrameID);
}
});
});
</script>
I use horizontal theme and added my bg and have navigation menu.
<ul id="nav">
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
</ul>
When click TWO item on ONE, go to TWO, nothing problem. But when click FIVE on TWO go to the corresponding page but don’t show between items. I want this:
E.G. Click FOUR on TWO, first THREE and after get FOUR. I hope, you can understand me. How can i do this?
Sequence.js doesn’t work in this way. Frames are independent of each other, so when you are viewing the first frame, and navigate to the fifth, the frames in between remain inactive and unchanged.