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. jQuery Social Share Bar
  2. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  3. no-image
  4. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  5. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  6. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

コメント

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

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

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP