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. Jquery Line Progress Bar
  2. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  3. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  4. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  5. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  6. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

コメント

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

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

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP