JavaScript

2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftyslide」を使ってみました。比較的新しめの画像スライダーですね。わずか2KBしかないのでうれしいです。マークアップも余計なものはなく複雑さを感じさせないシンプルな実装ができるかと思います。オプションも最低限の機能に絞って提供されているのでとてもわかりやすいですね。以下、使い方です。

[ads_center]

使い方

以下のURLからダウンロードできます。ちなみにデモもありますので実際に見たい方はどうぞ。

マークアップはこんな感じで超分かりやすいです。

<div id="slideshow">
    <ul>
        <li><img src="画像のパス" alt="" title="タイトル1" /></li>
        <li><img src="画像のパス" alt="" title="タイトル2" /></li>
        <li><img src="画像のパス" alt="" title="タイトル3" /></li>
        <li><img src="画像のパス" alt="" title="タイトル4" /></li>
        <li><img src="画像のパス" alt="" title="タイトル5" /></li>
    </ul>
</div>   

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

<link rel="stylesheet" href="css/craftyslide.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/craftyslide.min.js"></script>
<script>
    $("#slideshow").craftyslide();
</script>

とてもシンプルでいいですね。オプションを指定する場合はこんな感じで指定します。

$("#slideshow").craftyslide({
  'width': 340,
  'height': 200,
  'pagination': true,
  'fadetime': 1000,
  'delay': 6500
});

以下簡単ですがオプションの解説です。

オプション

width
スライダーの幅を指定できます。
height
スライダーの高さを指定できます。
pagination
ページネーションを表示します。trueかfalseを指定できます。trueで表示、falseで非表示になります。falseを指定した場合は自動でスライドするようになります。
fadetime
スライドのフェードアニメーションのスピードを指定できます。
delay
paginationがfalseになっている場合に使用することができます。ページが切り替わるまでの間隔のスピードを指定できます。

ということで、どれも余計なものがなくてとても簡単なのでテンションが上がるかと思います!オススメです、Craftyslide。

関連記事

  1. jQuery Hero Slider Plugin
  2. jQuery Quick Modal
  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  5. stickUp2

    JavaScript

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

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

  6. Jquery progress indicator on page scroll

コメント

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

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

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP