jQuery - 横スライド：ホイール対応

DEMO

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横スライド mousewheel</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
</head>
<body>
  <div id="container">
  <div class="page" id="page1">
  <ul class="nav">
  <li>Page1</li>
  <li><a href="#page2" class="pager">Page2</a></li>
  <li><a href="#page3" class="pager">Page3</a></li>
  <li><a href="#page4" class="pager">Page4</a></li>
  </ul>
  <div class="content">
  <h1>Page1</h1>
  </div>
  </div>
  
  <div class="page" id="page2">
  <ul class="nav">
  <li><a href="#page1" class="pager">Page1</a></li>
  <li>Page2</li>
  <li><a href="#page3" class="pager">Page3</a></li>
  <li><a href="#page4" class="pager">Page4</a></li>
  </ul>
  <div class="content">
  <h1>Page2</h1>
  </div>
  </div>
  
  <div class="page" id="page3">
  <ul class="nav">
  <li><a href="#page1" class="pager">Page1</a></li>
  <li><a href="#page2" class="pager">Page2</a></li>
  <li>Page3</li>
  <li><a href="#page4" class="pager">Page4</a></li>
  </ul>
  <div class="content">
  <h1>Page3</h1>
  </div>
  </div>
  
  <div class="page" id="page4">
  <ul class="nav">
  <li><a href="#page1" class="pager">Page1</a></li>
  <li><a href="#page2" class="pager">Page2</a></li>
  <li><a href="#page3" class="pager">Page3</a></li>
  <li>Page4</li>
  </ul>
  <div class="content">
  <h1>Page4</h1>
  </div>
  </div>

  </div>
</body>
</html>

@charset "utf-8";

/*表示修飾*/
* {
  font-family: 
    Verdana, Geneva, sans-serif;
  margin:0; 
  padding: 0;
}
body {
  margin: 0; 
}
h1 {
  font-size: 28px;
  margin: 15px 0 0 30px;
}
.nav {
  background: #000; 
  padding: 5px 5px 5px 60px; 
}
.nav li {
  display: inline-block;
}
.nav li, .nav li a {
  color: #fff;
}
.content {
  margin: 0 0 0 30px;
}
.black {
  background: #000; 
  color: #fff;
}
.content ul {
  width: 400px; 
  margin: 0 0 0 30px;
}
.content li {
  margin: 0 0 0.6em 0;
}
/*ページ設定*/
body{
	width:7680px;; /* =ページ幅×ページ数 */
	position:absolute;
	top:0px;
	left:0px; 
	bottom:0px;
}
.page { 
	margin:0px;
	bottom:0px;
	width:1920px;/* =ページ幅 */
	float: left;
	height: 1000px;
}#page1 {
	background-color:#9D87C7;
}
#page2 {
	background-color:#87B1C7;
}
#page3 {
	background-color:#B1C787;
}
#page4 {
	background-color:#C79D87;
}