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. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  2. Zoomerang.js
  3. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  4. Responsive Multi Menu
  5. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP