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. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  2. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  3. StellarNav.js

    JavaScript

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

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

  4. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  5. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

コメント

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

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP