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

関連記事

  1. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  2. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  6. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城
  5. ハードサイド CS80

Instagram始めました

Facebookページ

PAGE TOP