スライダーを使う時、基本的にはbxsliderとか定番系を使うのですが、たまたま別のスライダーを使ったので導入をメモ。

[ダウンロード:SMOOTH DIV SCROLL]

4つのライブラリを追加してから初期化する

cssとjsを読み込んで初期化すれば動きます。 jsの数が多い気がする。

• jquery-ui-1.10.3.custom.min.js
• jquery.mousewheel.min.js
• jquery.kinetic.min.js
• jquery.smoothdivscroll-1.3-min.js

上記4つを呼び出して、初期化を行います。※jQueryは読み込んである前提で

js

$(document).ready(function () {
			// None of the options are set
			$("div.sliderBox").smoothDivScroll({
				autoScrollingMode: "onStart"
			});
		});

全体はコチラ

	<!-- jQuery UI (Custom Download containing only Widget and Effects Core)
	     You can make your own at: http://jqueryui.com/download -->
	<script src="js/lib/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

	<!-- Latest version (3.1.4) of jQuery Mouse Wheel by Brandon Aaron
	     You will find it here: https://github.com/brandonaaron/jquery-mousewheel -->
	<script src="js/lib/jquery.mousewheel.min.js" type="text/javascript"></script>

	<!-- jQuery Kinectic (1.8.2) used for touch scrolling -->
	<!-- https://github.com/davetayls/jquery.kinetic/ -->
	<script src="js/lib/	<li>jquery.kinetic.min.js</li>
" type="text/javascript"></script>

	<!-- Smooth Div Scroll 1.3 minified-->
	<script src="js/lib/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
	<!-- If you want to look at the uncompressed version you find it at
	     js/jquery.smoothDivScroll-1.3.js -->

<!-- 初期化 -->
	<script type="text/javascript">
		// Initialize the plugin with no custom options
		$(document).ready(function () {
			// None of the options are set
			$("div.sliderBox").smoothDivScroll({
				autoScrollingMode: "onStart"
			});
		});
	</script>

注意としてはスライドする画像をfloat:leftにして、そもそも横並びにしておかないと動かないというとこでしょうか。

cssも呼び出しをわすれずにね

<link rel="stylesheet" href="css/lib/smoothDivScroll.css">