Coin Slider

JavaScript

ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

ユニークなエフェクトで画像がスライドしていくjQueryイメージスライダー「Coin Slider」の備忘録。イメージスライダーとしての必要な機能も揃っている上にシンプルでとても軽量です。ブラウザ対応は、IE6+、Firefox 2+、Safari 2+、Google Chrome 3+、Opera 9+、になります。

[ads_center]

使い方

jQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

以下はマークアップです。

<div id='coin-slider'>
    <a href="img01_url" target="_blank">
        <img src='img01.jpg' >
        <span>サンプルテキスト</span>
    </a>
    <!-- 中略 -->
    <a href="imgN_url">
        <img src='imgN.jpg' >
        <span>サンプルテキスト</span>
    </a>
</div>

あとはCoin Sliderを呼び出せばOKです。

<script type="text/javascript">
$(document).ready(function() {
    $('#coin-slider').coinslider();
});
</script>

オプションも色々あるのでカスタマイズする際に役立ちそうですね。

LOCKJOY(ロックジョイ)待ち受けを見てロック解除でポイントが貯まるLOCKJOY(ロックジョイ)を使ってみた前のページ

Google検索を英語だけの結果で表示させる簡単な方法次のページ

関連記事

  1. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  2. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  3. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  4. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  5. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  6. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP