no-image

JavaScript

豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

startValは豊富なオプションやAPIを有したカスタマイズ性の高いスライダーを実装できるjQueryスライダープラグインです。ボリュームある内容ですが、プラグイン自体は軽量に仕上がっていたりマークアップもシンプルに記述できたりと、使いやすそうな印象です。

startVal

デモ

デモでは賑やかな動きをするスライダーが設置されています。スライダー下部には左右に切り替える矢印ボタン、スライダー右上にはナビゲーションが設置されています。

スライダーは一定時間が経過すると自動でスライドするようになっています。スライダー下部にその時間を示すプログレスバーが表示されるので、このバーが左から右へ伸びていき、右端まで伸びると次の画像にスライドされます。

アニメーションは画像がグルッグルッと回転するダイナミックな動きをします。最初は時計回りに回転して、その後に今度は反時計回りに回転します。

オプションやAPIにはたくさんの項目が用意されているので、カスタマイズして使いたい人には嬉しい仕様ですね。ちなみに先ほどのアニメーションもオプションから変更することができます。

アニメーションは「animation」の項目から設定可能です。デフォルトは「rotation」で、この他にもtranslation、vibration、zoomといった値が用意されています。

オプションを利用することで細部まで自分好みにカスタマイズできると思うので、気になる方はぜひチェックしてみてください。

startVal

関連記事

  1. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  2. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  3. jQuery Slideout Menu

    JavaScript

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

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

  4. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  5. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP