QR Code Business Card

簡単にサムネイルやバナーをスライドにするCarouFredSelの使い方!

 バナーをたくさん貼りたいけど、あまりベタベタたくさん貼りたくない場合によく使う手なのですが、バナーをスライド風にして、自動でローテーションさせたりします。そんな時にこのjQueryカルーセルプラグイン「CarouFredSel」が便利です。オプションでいろいろな動き方を設定できますので、これ一つでいろいろな場面で使えますよ!


【更新履歴】
2013年02月22日 WordPressへの使い方追加
2013年09月05日 トップイメージによく使うオプションcrossfadeを追加


jQueryプラグインのダウンロード


Circular, Responsive jQuery Carousel - CarouFredSel

Circular, Responsive jQuery Carousel – CarouFredSel (機械日本語訳はこちら)

 上記サイトよりプラグインをダウンロードして下さい。

 「jquery.carouFredSel-*.*.*.js」もしくは「jquery.carouFredSel-*.*.*-packed.js」がプラグイン本体です。「packed」の方は、余計な改行を全て抜いたバージョンです。お好きな方を読み込んで下さい。





サンプル





jQueryプラグイン CarouFredSel デモ

jQueryプラグイン CarouFredSel デモ

 このようにオプションの設定により、さまざまな動作をさせる事が可能です。便利です!




5-6行目 プラグインの読み込み



このようにjQueryの本体の後で、CarouFredSelを読み込んで下さい。



7-86行目 オプションの設定




 オプションの設定は覚え切れないほどたくさんありますが、上のサンプル程度であれば、このくらい設定すれば可能です。他のオプションは、公式ページを参考にして下さい。

Configuration – CarouFredSel (機械日本語訳はこちら)



Configuration - robot

Configuration – robot (機械日本語訳はこちら)

 公式サイトには、質問に答えていくだけで、オプションのスクリプトを組んでくれる、Configuration robotのページがあります。機械日本語訳でも何となく内容がわかると思います。




87-95行目 CSS



【ポイント】
 ブラウザに画像を読み込んだ際に、一瞬だけ画像が大きくはみ出して並んでしまう現象が起きる場合があります。それを防止するために、overflow: hidden;を入れています。


 スライドさせる要素はフロート化して、ブロック要素出ない場合はブロック化して下さい。サンプルはブラウザのバグ防止に、vertical-align:bottom;を入れています。




100-151行目 html


 公式サイトの説明では、下記のようにイメージタグを並べても使えますし、リストタグでも使えます。今回のサンプルではイメージタグを使いました。










 このCarouFredSelを使えば、お手軽にカルーセル(スライド)を作る事ができます。切り替えを早めに設定すると、キビキビ動いてなかなか良い感じです。

 他にもこのプラグインでは、カルーセルを動かすコントローラーも簡単につけられるようです。そちらはまだ試した事がないのですが、また挑戦したいと思います。


 あとWordPressにCarouFredSelを使いたいのですが、まだ動かせていません。どうも読み込む位置が問題なようです。改良してうまくできたらまた報告します!



【追記:2013年2月22日】
WordPressでも使えました。<?php wp_head(); ?>の後ろにjquery.carouFredSel-6.1.0.jsなど読み込むと使えます。










SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)