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

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  2. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  3. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  4. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  6. Sticky Slider Navigation(Responsive)

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP