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();

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

関連記事

  1. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

  2. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  3. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  4. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  5. no-image
  6. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

コメント

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

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

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP