no-image

JavaScript

多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

camera-sliderは多彩なエフェクトを備えた美しいスライドショーを実装できるjQueryスライダープラグインです。レスポンシブ対応でモバイルフレンドリーな設計がなされているほか、豊富なオプションによる高いカスタマイズ性も有しています。

レスポンシブ対応でモバイルフレンドリー

デモ

デモでは画面中央に大きなスライダーが表示されていて、自動的に切り替わるスライドショーになっています。

スライダー下部には次の画像へ切り替わるまでの時間を表したバーが付いていて、時間の経過とともに左から右へバーが伸びていきます。右端までバーが伸びると次の画像へ切り替わる仕組みです。

また、スライダーにマウスオーバーすると左右の矢印ボタンと再生/停止ボタンが表示されます。再生/停止ボタンをクリックすることで自動スライド機能のオン/オフの切り替えが可能です。左右の矢印ボタンからは画像を手動で前後移動できます。

さらにスライダー下部にはナビゲーションも表示されているので、現在表示中の画像がどの位置にいるのかを確認できるとともに、ここから任意の画像を選択することも可能です。

スライダーのエフェクトには様々な種類があり、横へスライドするものや細かくブロック状に分裂しながら切り替わるものなど、いろんなタイプが用意されています。

デモはレスポンシブにも対応しているのでモバイルフレンドリーなスライダーに仕上がっています。

オプションも豊富で、alignment、autoAdvance、mobileAutoAdvance、barDirection、barPosition、cols、easing、mobileEasing、fx、mobileFx、gridDifference、height、imagePath、hover、loader……など、他にもたくさんの項目が用意されています。

camera-slider

no-imageマテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」前のページ

スライドでコンテンツを引き出せる「Pushbar.js」次のページPushbar.js

関連記事

  1. Responsive Elements
  2. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  3. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  4. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  5. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  6. jQuery Social Share Bar

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP