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

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  2. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  3. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  4. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP