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

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  2. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  3. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

  4. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  5. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP