横スクロールがうまくいきません。

Question

前提・実現したいこと

数十枚の画像を横スクロールで表示させようと思っています。

発生している問題・エラーメッセージ

1.画像の一番右側に余計なスペースができてしまいます。
2.リサイズするとスクロールスピードが速くなってしまいます。

該当のソースコード

<div id="contents">
    <ul id="nav">
        <li><a href="#s01">01</a></li>
        <li><a href="#s02">02</a></li>
        <li><a href="#s03">03</a></li>
        <li><a href="#s04">04</a></li>
        <li><a href="#s05">05</a></li>
    </ul>
    <div id="s01" class="section">
        <p><img src="img/height1080_01.jpg" alt=""></p>
    </div>
    <div id="s02" class="section">
        <p><img src="img/height1080_02.jpg" alt=""></p>
    </div>
    <div id="s03" class="section">
        <p><img src="img/height1080_03.jpg" alt=""></p>
    </div>
    <div id="s04" class="section">
        <p><img src="img/height1080_04.jpg" alt=""></p>
    </div>
    <div id="s05" class="section">
        <p><img src="img/height1080_05.jpg" alt=""></p>
    </div>
<!-- /#contents --></div>

html,body,div,ul,li,p{
	margin: 0;
	padding: 0;
}
body{
	background: #000;
}
#contents {
    overflow: hidden;
    padding-top: 60px;
}
div.section {
    background: #FFFFFF;
    float: left;
}
.section p img{
	height: 100vh;
}
#nav {
    list-style: none;
    margin-bottom: 10px;
    position: fixed;
    left: 60px;
    top: 30px;
}
#nav li {
    display: inline;
    margin-right: 0.5em;
}
#nav li a {
    color: #fff;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.touchSwipe.js"></script>
<script>
$(function() {
	//リサイズ
	$(window).on('load resize', function(){
		//コンテンツの横サイズ
		var cont = $('#contents');
		var contW = $('.section').outerWidth(true) * $('div',cont ).length;
		cont.css('width', contW);
		//スクロールスピード
		var speed = 5;
		//マウスホイールで横移動
		$('html').mousewheel(function(event, mov) {
			//ie firefox
			$(this).scrollLeft($(this).scrollLeft() - mov * speed);
			//webkit
			$('body').scrollLeft($('body').scrollLeft() - mov * speed);
			return false;   //縦スクロール不可
		});
	});
});
</script>

試したこと

下記のサイトを参考にさせていただいたのですが、
http://www.webopixel.net/javascript/421.html

リサイズを追加したり、スクロールスピードをいじったり、余計な余白を省いたりしたのですが、現段階でどこをどういじればいいものかわかりません。ご教授ください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

質問者と同じ環境にするためにも、最低限でもjqueryライブラリはどこからダウンロードしたかサイトURLを掲載すると親切に思えます。

[yuta0114]

大変失礼しました。補足情報に追加いたしました。

Answer 1

1枚目の画像の幅を取得して掛け算した数値が#contentsのwidthに入っていたのだとおもいます。
各sectionの幅を取得する記述を付け加え、その合計値を代入しました。

スクロールスピードに関しましては、リロード・リサイズの記述の外に記述をだしてやれば、問題なく動作しました。

また機会がございましたら、よろしくお願いいたします。

Answer 2

画像の右側に余計なスペースが入るとの事ですが、これが画像ではなく各section要素にbackground-colorを指定しても同様のスペースが入るでしょうか？

Comments

[yuta0114]

画像を消して数字を割り振り、paddingで内スペースを入れてスクロールさせても一番右端に余白はできませんでした。

最後の画像の後ろに謎のスペースを要素検証でみてるのですが、
#contentsに内包されているようでして、
#contentsのoverflow: hidden をはずすとどこにも属さない謎のスペースになってしまいます。

[退会済みユーザー]

contentsにwidth100%指定するのはどうでしょうか。
あと、float使用してるとのことですので一応clearfixも付与してみてはどうでしょうか。
あと画像の順番を変えてみてはどうでしょうか。

[yuta0114]

ご回答ありがとうございます。
いろいろ試みたのですが、jQueryの記述の方をいじることでなんとか解決いたしました。
また機会がございましたら、よろしくお願いいたします。