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

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  2. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  3. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  4. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  5. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  6. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP