jQuery carousel(カルーセル)の巻
memo
参考サイトにリンクしてあるサイトhttp://sorgalla.com/projects/jcarousel/の上の方に
Download: jcarousel.tar.gz or jcarousel.zip
というのがあるので、「zip」の方をダウンロード。ダウンロードしたファイルの中身はいらないのも入ってる。基本的に必要ののは、jquery.jcarousel.min.jsとskin.cssとcarusel.html
- jQuery本体を読み込む
- jsor-jcarousel/lib/jquery.jcarousel.min.jsを読み込む(パスの指定に注意)
- head内にトリガーを記述(functionから始まるスクリプト数行)
- cssを読み込むjsor-jcarousel/skins/tango/skin.css(パスの指定に注意)
- cssで見た目をカスタマイズしたい時は、直接skin.cssを変えてもいいけど、head内にcssを書いて上書きした方が安全かな。ちなみに下記のような上書きをしました。
css
/*上書きcss*/ .jcarousel-skin-tango .jcarousel-container-horizontal { padding: 20px 40px; width: 225px; background-color:#999; border-color:#000; } .jcarousel-skin-tango .jcarousel-clip-horizontal { height:230px; } .jcarousel-skin-tango .jcarousel-item { width:300px; height:300px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { top: 115px; } .jcarousel-skin-tango .jcarousel-next-horizontal { top: 115px; } /*トリガー*/ $(function() { jQuery('#kamon').jcarousel({ wrap: 'circular', scroll:1 }); });
html
<li><img src="img/images.jpg" /></li>
<li><img src="img/images2.jpg" /></li>
<li><img src="img/images3.jpg" /></li>
<li><img src="img/images4.jpg" /></li>
</ul>
このhtmlの表示は文字参照で表示しています。< と >
point to notice
トリガーにwrap:'circular',scroll:1 という記述があります。,は接続詞みたいなものですのです。でも最後の指定の後には,を入れない方が良いです。(scroll:1←,がないでしょ)IEでおかしくなるらしいです。
※記事とは無関係だけどtimeタグとmainタグを使ってみた。