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>

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

関連記事

  1. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  2. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  3. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  4. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  5. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  6. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

コメント

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

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

最近の記事

  1. M32ミニ
  2. CITTA TT5.0
  3. Kindle Oasis
  4. OWL-WDDESK01

アーカイブ

PAGE TOP