jquerysimplyScrollの使い方
jqueryのsimplyScrollの使ってみたので、使い方を記載します。
まずプラグインがある場所は下記となります。
http://logicbox.net/jquery/simplyscroll/
上記から
jquery.simplyscroll.js
jquery.simplyscroll.css
をダウンロードしてください。
JSファイル（当社はscript.jsというファイルを作成して作っています）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
(function($){ $(function(){ $('#loopSlide ul').simplyScroll({ autoMode: 'loop', speed: 1, frameRate: 24, horizontal: true, pauseOnHover: true, pauseOnTouch: true }); }); })(jQuery); |
HTMLファイル
|
1 2 3 4 5 6 7 |
<div id="loopSlide"> <ul> <li><img src="画像パス" ></li> <li><img src="画像パス" ></li> <li><img src="画像パス" ></li> </ul> </div> |
もちろんヘッダーのjsファイルの読み込みは忘れないように。
CSSファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.simply-scroll-container { position: relative; } .simply-scroll-clip { position: relative; overflow: hidden; } .simply-scroll-list { overflow: hidden; margin: 0; padding: 0; } .simply-scroll-list li { float: left; /* Horizontal scroll only */ padding: 0; margin: 0; width: 481px; height: 319px; } .simply-scroll-list li img { display: block; } |
この通りに制作したら、widthの横幅などがjquery.simplyscroll.cssで固定の数字が記載されているので、自分にあったページ幅に変更していただくと見栄えもよくなると思います。
