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」の使い方でした。

HTML5 Sortableリストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 Sortable」前のページ

スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swipebox」次のページSwipebox

関連記事

  1. Flickerplate
  2. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  3. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  4. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  5. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  6. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

コメント

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

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

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP