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. ダークチョコレート
  2. 朝のコーヒー
  3. ザンビア
  4. かほり梨
  5. 根菜チキン サラダラップ
PAGE TOP