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'
});

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

ブログ投稿を更新したら自動でツイートしてくれるWordPressプラグイン「WordTwit」を使ってみた前のページ

Macに入っているApacheでバーチャルホストを設定してみる次のページ

関連記事

  1. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  2. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  3. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  4. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  5. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  6. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP