CarouFredSel


Description: 画像でもHTMLでも何でもカルーセル化出来るプラグインです。汎用性も高く、導入も手軽、クロスブラウザにも対応しています。また、縦や横など、様々な形式にも対応しているのも魅力の一つですね。
Sample: demo
Tutorial: CarouFredSel
License: MIT

Sample

Note

	$(function() {
				$('ul#basic_config').carouFredSel();
				$('ul#user_interaction').carouFredSel({
					circular: false,
					auto: false,
					prev: "#prev1",
					next: "#next1"
				});
				$('#vnoviwvw').carouFredSel({
					items: 'variable',
					next: '#next2',
					prev: '#prev2'
				});
			});

jQueryとプラグインを読み込んで上記設定をします。あとはマークアップ。

<div class="list_carousel">
					<ul id="user_interaction">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
						<li>10</li>
						<li>11</li>
						<li>12</li>
						<li>13</li>
					</ul>
					<div class="clearfix"></div>
					<a id="prev1" href="#">←</a>
					<a id="next1" href="#">→</a>
				</div>

ボタン有りの場合のマークアップです。

Related snippet :

  • Description: クロスブラウザ対応でシンプルなカルーセルを実装します。クリック式、ページ送り付きなどの選択も可能。アニメーションも充実しています。要jquery.e ...
  • Description: 要素がフリップ(ひっくり返す)するWebギャラリーです。縦や横に対応します。クロスブラウザ対応でとてもシンプルなので汎用的に使えそうですね。 ...
  • Description: シンプルなLightbox系プラグインです。汎用的なデザインで使いやすく、カスタマイズもしやすそうです。 Sample: demo ...
  • Description: 背景に指定した画像をギャラリーにするプラグインです。IE6でも問題無し。背景指定なので、スライドショーの上に画像やテキストを自由に配置することも可能 ...
  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: カメラのシャッターのようなエフェクトで画像を切り替えるプラグイン。HTML5のcanvasを使っています。凄いですねこれwもちろん、対応ブラウザは限 ...
  • Description: シンプルなツールチップです。アンカータグのtitleをツールチップとして表示させます。色の変更も可能。主要ブラウザで稼動してくれます。 S ...