レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

レスポンシブに対応している軽量のjQueryスライダー「Juicy Slider」をご紹介します。エフェクトがとっても優雅な感じで素敵ですね。min版が約2KBとかなり軽量なところも嬉しいです。あと、JavaScriptを使用して画像とviewportに対応するアスペクト比を計算して画像サイズが調整されるので、古いブラウザでもより一貫した互換性になっています。

[ads_center]

使い方

Juicy Slider

このように見た目がとてもシンプルなのでいい感じですね。マウスオーバーすると画像切り替えの矢印アイコンが表示されます。

使い方も特に難しい設定はありません。head内にjQuery、jQuery UI、プラグインファイルを読み込みます。

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/juicyslider.css&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/juicyslider.js&quot;&gt;&lt;/script&gt;

マークアップは以下のように記述します。

&lt;div id=&quot;myslider&quot; class=&quot;juicyslider&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;img1.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img2.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img3.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
        &lt;!-- 中略 --&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;nav next&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;nav prev&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

あとはプラグインを初期化すればOKです。

$('#myslider').juicyslider();

オプションもいくつか用意されているので、自分に合ったカスタマイズをする際に役立ちそうですね。

Juicy Slider

JavaScript

Google検索を英語だけの結果で表示させる簡単な方法前のページ

フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」次のページ