jQuery carousel(カルーセル)の巻

参考サイト

memo

参考サイトにリンクしてあるサイトhttp://sorgalla.com/projects/jcarousel/の上の方に
Download: jcarousel.tar.gz or jcarousel.zip
というのがあるので、「zip」の方をダウンロード。ダウンロードしたファイルの中身はいらないのも入ってる。基本的に必要ののは、jquery.jcarousel.min.jsとskin.cssとcarusel.html

  1. jQuery本体を読み込む
  2. jsor-jcarousel/lib/jquery.jcarousel.min.jsを読み込む(パスの指定に注意)
  3. head内にトリガーを記述(functionから始まるスクリプト数行)
  4. cssを読み込むjsor-jcarousel/skins/tango/skin.css(パスの指定に注意)
  5. 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

<ul id="kamon" class="jcarousel-skin-tango">
<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タグを使ってみた。