I'm trying to have a one page solution with jQuery-One-Page-Nav for highlighting menu links when i reach some "sections" in the page (and click to scroll to respective sections).
Inside this sections i have some posts like the code
<body>
<nav>
<ul class="menuslides">
<li class="item-1">
<a href="#section-1" >One</a>
</li>
<li class="item-2">
<a href="#section-2" >Two</a>
</li>
...
</ul>
</nav>
<div id="wrapper">
<div id="wrap">
<section id="section-1">
<div class="post" id="item-slide-1">img</div>
<div class="post" id="item-slide-2">img</div>
</section>
<section id="section-2">
<div class="post" id="item-slide-3">img</div>
<div class="post" id="item-slide-4">img</div>
<div class="post" id="item-slide-5">img</div>
</section>
...
<section id="section-10">
<div class="post" id="item-slide-31">img</div>
...
</section>
</div>
<div id="buttons">
<div id="button" class="goto-prev">Prev</div>
<div id="button" class="goto-next">Next</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.menuslides').onePageNav();
});
jQuery(function( $ ){
$('#wrapper').serialScroll({
target:'#wrap',
items:'.post',
prev:'div.goto-prev',
next:'div.goto-next',
axis:'y',
duration:700,
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});
});
</script>
</body>
I'm happy with the jQuery-One-Page-Nav, it works very well and i can navigate through "sections" with the nav menu.
But i need to add two button or two arrows that they work like a prev-next link scrolling the page through my posts class="post"
I'm using https://github.com/davist11/jQuery-One-Page-Nav and https://github.com/flesler/jquery.serialScroll with no weird changes to the code (only renamed ids and classes) but I can not get them coexist together: it works only one of them!
Is there any solution to make them co-exist, or is there a snippet of code that will enable me to have these two functions at the same time?
