JavaScript

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

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

[ads_center]

使い方

Juicy Slider

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

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

<link rel="stylesheet" href="css/juicyslider.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/juicyslider.js"></script>

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

<div id="myslider" class="juicyslider">
    <ul>
        <li><img src="img1.jpg" alt=""></li>
        <li><img src="img2.jpg" alt=""></li>
        <li><img src="img3.jpg" alt=""></li>
        <!-- 中略 -->
    </ul>
    <div class="nav next"></div>
    <div class="nav prev"></div>
    <div class="mask"></div>
</div>

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

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

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

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

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

関連記事

  1. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  2. Responsive Multi Menu
  3. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  4. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  5. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  6. Chameleon.js

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP