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. jQuery Hero Slider Plugin
  2. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  3. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  4. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  5. JK Responsive Youtube Video and Image Gallery
  6. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP