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

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  2. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  3. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  4. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  5. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  6. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP