BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

[jQueryプラグイン]いろいろなアニメーションが用意されたコンテンツスライダー | Adaptor, a jQuery 3D content slider

更新日:2022/05/18

jQuery を利用したコンテンツスライダーはいろいろな方法やいろいろなプラグインがありますが、CSSの 3Dプロパティを使ったエフェクトを選べるプラグインを紹介します。

Adaptor, a jQuery 3D content slider


デモページ
GitHub

現時点では9種類のエフェクトが用意されています。また IEでは CSSの 3Dプロパティに対応していませんが、対応していないブラウザに 3Dエフェクトを指定した場合はフェードなどが自動で適用されます。

■使い方

jQuery 本体とプラグインを読み込み

HTML では [ figure ] タグでコンテンツを囲み、下部にインジケータを表示する [ div ] を用意

CSS ではインジケータの色やサイズを指定

Script はインジケータ開始と停止の処理を用意しオプションで指定

ここでは下記のオプションを例にしました。

autoScroll
   自動スクロールの有無
speed
   コンテンツ切り替えのスピード
timeout
   コンテンツを表示している時間
effect
   エフェクトの種類
onbefore
   切り替え開始前のイベント
onafter
   切り替え完了後のイベント

インジケータ開始の処理を [ indicatorStart ]、インジケータ停止の処理を [ indicatorEnd ] で用意し、オプションでイベントに組み込んでいます。そして初回のインジケータ表示のために [ indicatorStart ] の呼び出しをしています。

まだ CSSの 3Dプロパティは実験段階のため、たまにおかしな方向に動くときもありますが… それでも少し他と違うスライドを実装したいときなどに利用してみてはいかがでしょうか。

(藤崎)

FOLLOW US