• かちびと.net

    CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDEのご紹介です。スマフォ用として利用するのもありかもですね。

    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

CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE

スポンサーリンク

3Dやスライスなど、様々なアニメーション
エフェクトを使用できて、且つレスポンシブ
Webデザインにも対応可能なイメージスライ
ダーを実装できるjQueryプラグインのご
紹介。REFINESLIDEというプラグインです。
覚えておいて損は無いのでは。

IEではフェードエフェクトのみになってしまいますが、iPhoneやiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利用するっていうのも手ですね。

REFINESLIDE


スマフォとかにも対応できるCSS3+jQueryなイメージスライダーです。3Dな感じのとかスライスしたエフェクトの素敵なもありますのでインパクトは与えられそうですね。


実機で問題なく動作しました。

Sample


上記はIE7でサンプルにアクセスした際の状態です。赤いラベルはそのブラウザでは非対応、という意味です。

以下、そのサンプルページになります。Chromeなら全対応でした。

Sample

コード

<link rel="stylesheet" href="refineslide.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="jquery.refineslide.min.js"></script>

本体(ver.1.7以上)とプラグインを読み込む。

    $(document).ready(function () {
        $('.foo').refineSlide();
    });

あとはセレクタ指定すれば完了です。

    $(document).ready(function () {
        $('.foo').refineSlide({
            transition         : 'fade',
            transitionDuration : 7000,
            autoPlay           : true,
            keyNav             : false,
            delay              : 0,
            controls           : null
        });
    });

セッティングはこんな感じ。コード見ればだいたい分かると思います。尚、css3 transformはjs内で指定されています。

<ul class="foo">
	<li class="group"><img src="01.jpg"></li>
	<li class="group"><img src="02.jpg"></li>
	<li class="group"><img src="03.jpg">
		<div class="rs-caption rs-bottom-right">
			<p>bar text</p>
		</div>
	</li>
	<li class="group"><img src="04.jpg"></li>
	<li class="group"><img src="05.jpg"></li>
</ul>

マークアップもシンプル。リンクもキャプション等も挿入できます。

ライセンスはMITです。いろいろとありがたいライブラリですねー。以下よりどうぞ。

REFINESLIDE

URL :
TRB :

Ads

Posts

Contact

Services