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. jQuery Responsive Tabs
  2. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  3. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  4. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  5. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  6. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP