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. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  2. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  3. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  4. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  5. Chameleon.js
  6. jquery countDownTimer

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP