[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider

IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。
実装にかかる時間は2分くらいでしょうか。

Flow Slider

[ad#ad-2]

• Flow Sliderの特徴
• Flow Sliderのデモ
• Flow Sliderの実装

Flow Sliderの特徴

• 滑らかなアニメーションで動作します。
• 実装は簡単で少しのコピペでok。
• ベースとなるスタイルシートは用意済み。
• クロスブラウザ対応。

対応ブラウザ

• Firefox
• Safari
• Chrome
• IE
• Opera9

Flow Sliderのデモ

デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。
スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。

Flow Slider

[ad#ad-2]

Flow Slider: Example

グリーンのボタン「Buy Book」をクリックすると、本棚の本が増えます。

Flow Sliderの実装

実装は簡単でおよそ2分、3つコピペするだけです。

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="jquery.js"></script>
<script src="flowslider.jquery.js"></script>

HTML

スライドする要素をdiv要素で内包し、「id="slider"」を付与します。

<div id="slider">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
</div>

CSS

最小限に実装する場合は、必要ありません。
上記の本棚のデモのような場合に記述してください。

JavaScript

jQueryのセレクタで「#slider」を指定します。

(function($) {
    $(document).ready(function() {
        $("#slider").FlowSlider();
    ));
})(jQuery);

スクリプトのオプション

オプションでは、アニメーションのスピード、ホバーの領域、初期デザインのスタイルシート利用の有無などが、設定できます。
オプションを加えると、スクリプトは下記のようになります。

$("#slider").FlowSlider({
    transition: "none",
    marginLeft: 100,
    frequency: 20
});