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。

プロフェッショナルなWebデザインのタイポグラフィ 25前のページ

jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる次のページ

関連記事

  1. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  2. no-image
  3. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  4. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  5. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  6. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP