[jQuery]複数の画像を効率的に表示するカルーセルプラグイン


シンプルなカルーセルプラグインを紹介します。少ないスペースで多くの画像を見せる仕組みとして、効果的です。MITライセンスです。

image
ステキです。上の例での導入コードは以下です。


Javascript

$("#foo1").carouFredSel();

HTML

<div class="image_carousel">
<div id="foo1">
<img src="examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
<img src="examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
<img src="examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
<img src="examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
<img src="examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
<img src="examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
<img src="examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
<img src="examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
<img src="examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
<img src="examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
<img src="examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
<img src="examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
</div>
<div class="clearfix"></div>
</div>

CSS

.image_carousel {
padding: 15px 0 15px 40px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}


他にも、インタラクションをつけたバージョンなども簡単に実装できるみたいです。

image

この実装方法のサンプルはネタ元に有ります。ダウンロードも↓で!
>>infinite, circular jQuery carousel --- CarouFredSel 2.1.3

1 件のコメント:

  1. こんにちは

    画像にリンクを付けると画像が表示できなくなってしまうのですが、こちらは何か原因わかりますでしょうか。
    画像にリンクつけたことありますでしょうか。

    また、サムネイルは10件しか表示されなかったのですが、こちらはどこで設定で変更できるのでしょうか。

    よろしくおねがいします。

    返信削除