jquery - Jquery を使用した前後のナビゲーション

Question

jQuery を介して制御される単純な前後のナビゲーションが必要です。現在、次のコードがあります。

$("#main-navigation a").bind("click",function(event){
    event.preventDefault();

    var target = $(this).attr("href");
    $("html, body").stop().animate({
        scrollLeft: $(target).offset().left,
        scrollRight: $(target).offset().right
    }, 1200,'easeInOutBack');
});

とHTML

<nav id="main-navigation">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>  

<div id="home" class="panel">
    <div class="wrapper">
        <img src="images/landing.png" width="1024" height="768" title="landing page" />

    </div>
</div>

<div id="explore" class="panel">
    <div class="wrapper">
        <img src="images/pageTwo.png" width="1024" height="768" title="page" />

    </div>
</div>

最終的に、DOM にはかなりの数の div があるため、プラグインに頼らずに、jQuery を各 div 間で (前後に) 移動させる比較的単純な方法が必要です。

どうすればこれを達成できますか？

前もって感謝します