Blog

今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」

タイトル通り、今まで見てきた中で、一番高機能なスライドショーかもしれません。

機能が豊富で、その設定もそこまで難しくないということで、
使いやすいプラグインです。

レスポンシブにも対応しており、
動画を組み込んだり、フルスクリーンにもできたりします。

簡単に特徴をあげると、

・スライドアニメーションのエフェクトが豊富
・スキン(カラー)が豊富にある
・サムネイル、ナビゲーション、ページング等の設定がいろんなパターンに対応
・レスポンシブ対応
・スライドのローダーが付いている
・キャプションが付けられる

といったところでしょうか。
ローダーが付いているのは、今までにほとんど見たことなかったので、
けっこういいですね。

ただ、html5なので、ieはそこまで対応していないかもしれません。
(いけてie8くらいまでかな)

デモを作成したので、ぜひ見てみてください。

DEMO

サムネイルは自分で作成しなきゃいけないのがちとめんどくさいですね・・・

それでは、使い方ご説明します。

cameraの使い方

まず、head内にjQueryとcssを読み込みます。

jQueryの設定は、

でOKです。
jQueryの部分は$ではダメみたいです。

html

あとはhtmlを

camera.cssに33種類のスキンが用意されていてそれを設定するには、

classを設定するだけでOKです。

他には下記のものがあります。

これだけでOKです!

そしてこのスライダーの魅力のオプションが以下になります。

cameraのオプション

プラグインのダウンロードは下記からどうぞ!

camera

サンプルのソースも載せておきます。

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ