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

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  2. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  3. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  4. pixelate.js
  5. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  6. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP