• かちびと.net

    幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Sliderのご紹介です。IE6などのオールドブラウザにも対応可能です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider

スポンサーリンク

以前やろうと思ったカルーセルを
実装できるプラグインが配布されて
いたので備忘録。幅の異なる要素
にも対応できるカルーセルです。
多くのカルーセルやスライダーは
サイズ固定ですよね・・・

多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。

Lemmon Slider


上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。

動作サンプルです。

div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='lemmon-slider-0.2.js'></script>

コアとプラグインを読み込みます。

$('#foo').lemmonSlider();

初期化します。

マークアップも以下のようなシンプルな形でOKです。

<div id="foo" class="bar">
    <ul>
           <li><img src="http://placehold.it/100x160"></li>
           <li><img src="http://placehold.it/150x160"></li>
           <li><img src="http://placehold.it/15x160"></li>
    </ul>
</div>

自動再生などのオプション設定項目は本サイトに記載されています。ライセンスはGPLとMITのディアルライセンスです。以下よりどうぞ。

Lemmon Slider

URL :
TRB :

Ads

Posts

Contact

Services