JavaScript

シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使ってみた

とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「ResponsiveSlides.js」を使ってみました。しかも軽量なところが嬉しいですね。1KB程度しかありません。マークアップもシンプルなのでとても簡単に実装できます。以下、簡単ですが使い方です。

[ads_center]

使い方

以下のサイトからダウンロードします。デモもありますのでそちらもどうぞ。

本体とダウンロードしたファイルをhead内に読み込みます。

<link rel="stylesheet" href="styles.css?v1.03" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script>
jQuery(function() {
    $("#slides").responsiveSlides({
        maxwidth: 800
    });
});
</script>

マークアップです。

<div id="slides">
    <img src="1.jpg" alt="" />
    <img src="2.jpg" alt="" />
    <img src="3.jpg" alt="" />
</div>

たったこれだけで完了です。とても簡単かつシンプルですね。こちらは自動でフェードして画像が切り替わっていきます。以下のオプションを指定すると自動を止めて、画像下部にナビゲーションが設置されます。

$("#slides").responsiveSlides({
    maxwidth: 800,
    auto: false,
    namespace: 'anotherslideshow'
});

ということで手軽にできるのでオススメかと思います。

関連記事

  1. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  2. jqueryIntroLoader
  3. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  4. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  6. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP