スライドショーのように横方向にスライドするWebページを作ることができるｊQuery
fullPage.jsを紹介します。
＊デモページ上にあるLightBoxのソースも記載しています。

↓以下が実際のソースサンプルです。

▼JavaScript

<!--JavaScript-->
<script src="./js/jquery-2.1.4.min.js"></script>
<!--LightBox用JavaScript-->
<script src="./js/lightbox.min.js"></script>
<!--横スライド用JavaScript-->
<script src="./js/jquery.easings.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>
<script>
(function($) {
$(function() {
$('#wrapper').fullpage({
anchors: ['page'],
resize :false
});
});
})(jQuery);
</script>

▼HTML

<div id="wrapper">
<div class="section">
<div class="slide" data-anchor="slide1">
<div class="panel">
<h2>HOME</h2>
<p>次ページにLightBoxのサンプルを置いています。</p>
</div><!--panel-->
</div><!--slide-->
<div class="slide" data-anchor="slide2">
<div class="panel">
<h2>LightBox</h2>
<ul>
<li><a href="./img/img001.jpg" data-lightbox="boxtest1"><img src="./img/img001.jpg" class="thumbnail" /></a></li>
<li><a href="./img/img002.jpg" data-lightbox="boxtest1"><img src="./img/img002.jpg" class="thumbnail" /></a></li>
<li><a href="./img/img003.jpg" data-lightbox="boxtest1"><img src="./img/img003.jpg" class="thumbnail" /></a></li>
<li><a href="./img/img004.jpg" data-lightbox="boxtest1"><img src="./img/img004.jpg" class="thumbnail" /></a></li>
<li><a href="./img/img005.jpg" data-lightbox="boxtest1"><img src="./img/img005.jpg" class="thumbnail" /></a></li>
</ul>
</div><!--panel-->
</div><!--slide-->
<div class="slide" data-anchor="slide3">
<div class="panel">
<h2>Code</h2>
<p>LightBoxに関係のある部分を抜粋</p>
<pre>
&#9;&#9;&lt;link rel="stylesheet" href="./css/lightbox.css"&gt;
&#9;&#9;&lt;link rel="stylesheet" href="./css/base.css"&gt;
&#9;&#9;&lt;!--JavaScript--&gt;
&#9;&#9;&lt;script src="./js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
&#9;&#9;&lt;!--LightBox&#29992;JavaScript--&gt;
&#9;&#9;&lt;script src="./js/lightbox.min.js"&gt;&lt;/script&gt;
&#9;&#9;&lt;ul&gt;
&#9;&#9;&lt;li&gt;&lt;a href="./img/img001.jpg" data-lightbox="boxtest1"&gt;&lt;img src="./img/img001.jpg" class="thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&#9;&#9;&lt;li&gt;&lt;a href="./img/img002.jpg" data-lightbox="boxtest1"&gt;&lt;img src="./img/img002.jpg" class="thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&#9;&#9;&lt;li&gt;&lt;a href="./img/img003.jpg" data-lightbox="boxtest1"&gt;&lt;img src="./img/img003.jpg" class="thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&#9;&#9;&lt;li&gt;&lt;a href="./img/img004.jpg" data-lightbox="boxtest1"&gt;&lt;img src="./img/img004.jpg" class="thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&#9;&#9;&lt;li&gt;&lt;a href="./img/img005.jpg" data-lightbox="boxtest1"&gt;&lt;img src="./img/img005.jpg" class="thumbnail" /&gt;&lt;/a&gt;&lt;/li&gt;
&#9;&#9;&lt;/ul&gt;
</pre>
</div><!--panel-->
</div><!--slide-->
</div><!--section-->
</div><!--wrapper-->

▼CSS

<link rel="stylesheet" href="./css/jquery.fullPage.css">
<link rel="stylesheet" href="./css/lightbox.css">
<link rel="stylesheet" href="./css/screen.css">
<link rel="stylesheet" href="./css/base.css">
<!--以下base.cssの内容、その他CSSはデフォルト-->
pre {
font-size:0.5em;
padding:0px;
background-color: rgba(0,0,0,0.4);
color:#fff;
}
ul {
list-style-type:none;
}
li{
float:left;
margin:0 5px;
}
.section {
background-image: url(../img/bg.jpg);
background-size: cover;
}
.panel {
background-color: rgba(255,255,255,0.7);
height: 400px;
width: 740px;
padding: 40px;
margin: 0 auto;
box-shadow: 0 0 25px rgba(0,0,0,0.1);
}
.thumbnail{
width:180px;
height:120px;
}

今回、参考にさせていただいたのは、
『sleepingegg.net –Tips–』さんです。
ありがとうございます。

デモページは、こちら