スクロールに特化したjQueryスライダー「simplyScroll v2」

web制作

jQueryのスライダーはたくさんありますが、スクロールに特化した「simplyScroll v2」(レスポンシブ対応)をご紹介いたします。

デモ

デモを見る

simplyScroll v2のダウンロード

ライブラリのダウンロードはこちら

jQuery simplyScroll - Logicbox
simplyScroll - A jQuery plugin for scrolling a set of images/elements within a page. Features seamless/infinite scrolling and is fully customisable

ライブラリの読み込み

「jquery.simplyscroll.zip」をダウンロードしたら解凍して、その中にあるJSファイルを<head>内または、</body>タグの直前で読み込みます。

<script src="jquery.simplyscroll.min.js"></script>

HTML

スライドさせるHTMLを用意します。

<ul id="simplyScroll">
<li><img src="画像ファイルパス"></li>
<li><img src="画像ファイルパス"></li>
<li><img src="画像ファイルパス"></li>
<li><img src="画像ファイルパス"></li>
<li><img src="画像ファイルパス"></li>
</ul>

CSS

simplyScrollのスタイル(一部)とスライドさせる画像サイズを、お使いのCSSファイルに指定します。

.simply-scroll-container {
	position: relative;
}
.simply-scroll-clip {
	position: relative;
	overflow: hidden;
}
.simply-scroll-list {
	overflow: hidden;
	margin: 0;
	padding: 0;
	height: 画像の高さ; /* 崩れる場合にはこちらも設定 */
}
.simply-scroll-list li {
	list-style:none !important;
	float: left;
	width: 画像の横幅;
	height: 画像の高さ;
	margin: 0;
	padding: 0;
}
.simply-scroll-list li img {
	display: block;
}

jQuery

ライブラリの読み込みよりも後に以下のように記述します。

$(function() {
	$("#simplyScroll").simplyScroll();
});

まとめ

よくあるスライダーではオプションを指定することで同様のことが出来ますが、スクロールに特化しているので、軽量でかつ実装も簡単です。

他のライブラリと同様にスピードやマウスオーバー時の処理などのオプションがいくつかあるので、詳細は配布サイトをご確認いただければと思います。

jQuery simplyScroll - Logicbox
simplyScroll - A jQuery plugin for scrolling a set of images/elements within a page. Features seamless/infinite scrolling and is fully customisable