RefineSlide

JavaScript

多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

多数のエフェクトがあってレスポンシブWebデザインにも対応しているスライダーを実装できるjQueryプラグイン「RefineSlide」を使ってみました。フェードやスライスといったものから、ファンのように回りながら切り替わったり、キューブの立体のように回転したり色々と面白いエフェクトを指定することができます。ということで、以下、使い方です。

[ads_center]

使い方

使い方はとてもシンプルです。jQuery本体とダウンロードしたプラグインファイルを読み込みます。

<link rel="stylesheet" href="refineslide.css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.refineslide.js"></script>

スライダーをセットします。

<script>
$(document).ready(function () {
    $('.rs-slider').refineSlide();
});
</script>

HTMLはこんな感じで。わかりやすくていいですね。

<ul class="rs-slider">
    <li><img src="images/img01.jpg" alt="" /></li>
    <li><img src="images/img02.jpg" alt="" /></li>
    <li><img src="images/img03.jpg" alt="" /></li>
</ul>

オプションを指定する場合は以下のようにします。

$(document).ready(function () {
    $('.rs-slider').refineSlide({
        transition         : 'fan',
        transitionDuration : 1000,
        autoPlay           : false,
        keyNav             : true,
        delay              : 0,
        controls           : 'thumbs'
    });
});

transitionでエフェクトを指定できます。ちなみにデフォルトは ‘cubeV’ になっています。自動スライドやエフェクトのスピードなども調整できるので、自分の好きなスライダーに仕上げていくことができますね。他にも色々とオプションがあるので、詳しくは公式サイトでご確認下さい。

ということで、多数のエフェクトでレスポンシブ対応のjQueryスライダー「RefineSlide」の使い方でした。

関連記事

  1. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  2. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  3. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

  4. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  5. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  6. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

コメント

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

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

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP