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

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

サイトのキャプチャ

Flow Slider

Flow Sliderの特徴

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

対応ブラウザ

  • Firefox
  • Safari
  • Chrome
  • IE
  • Opera9

Flow Sliderのデモ

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

デモのキャプチャ

Flow Slider

デモのキャプチャ

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
});

top of page

©2017 coliss