スクロールに特化した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」をダウンロードしたら解凍して、その中にあるＪＳファイルを<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
コメント