jQueryプラグイン活用講座

jSliderのオプションでスライダの設定を変える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションのプロパティによりランダムな切り替え効果とループなどを設定します。
講師:
05:30

字幕

このレッスンでは画像を切り替えるスライダーのプラグインjSlier の設定を変えてみたいと思いますオプションをいくつか加えてスライダーの変化の仕方あるいは その時間などを変更してみたいと思いますまず 今現在は基本的な設定はできていますdiv 要素 class=”slider”に対して セレクタを与えてそして jSlider で実行できるんですけれどもセッティングとしてオブジェクトを渡していますここでは どのエレメントの中に画像があるのかdiv ですねそれから オートスライドをするのかしないのかする場合には true ということで2つだけプロパティが加えられています現在の設定を確認しましょう「メニュー」のファイルから「ブラウザーでプレビュー」しましょう画像が自動的に切り替わりますただ この切り替わりよく見てみるとちょっと気になります一瞬画像が消えてから フェードインするような感じで切り替わってますねこの一瞬消えるのを何とかしたいと思います何とかするオプションがありますのでHTML ドキュメントの方に戻りましょうここで加えるオプションのプロパティなんですがオブジェクトですからプロパティは, 区切りですねimages: そして true としますこうすると 画像は一瞬消えるんですがその代わりに背景画像を置いてくれるんですねですから 消えたことが分からないというふうになりますでは 早速確認しましょうファイルを保存しますブラウザウィンドウをリロードしましょう切り替わるとき よく見ててください消えませんねですから 今までの画像と後の画像がクロスフェードするような感じで切り替わっていますさて jSlider にはこの切り替えの効果今クロスフェードのようになって-いますけれども 他にも選択ができますそれをちょっと設定してみましょうどんな切り替え効果があるのか色々みたいですよねということなので 今回はまずプロパティはアニメーションですanimation としていろんなものをランダムに出してほしいという設定がありますrandom ですこうすると 画像によって切り替え効果が変わってきますからいろいろ どんなものがあるのか確かめることができますファイルを保存しましょう再び ブラウザのウィンドウをリロードしますカットインもあるんで パッと切り替わってしまうこともありますけれどもこれ面白いですね他にもパッと切り替わってしまいました真ん中からズームしてくるという感じですねもうちょっとありますからもうちょっと見てみましょうまた真ん中からになってしまいました実は上からとかもあるんですけれども画像が最後まで行ってしまいましたのでまた始めからまた始めからやり直してもまた効果は変わりますので何度でも見ることができますこれはフェードインクロスフェードですね上からとかっていうのもあるんでそれが出てくるのをちょっと待ちたいんですけれどもちょっとこの切り替えが長いので短くしてしまいましょうまたオプションのプロパティを加えます切り替え時間を短く ということでauto_slide_intervalですこれを1秒程度にすればもっとサクサク動くはずですでは保存して確認しましょうブラウザウィンドウをまたリロードします今度は速いですとっても速いですねはい 上から来ましたねすぐ最後に行ってしまうと止まっちゃいますループさせましょうまたオプションのプロパティを加えますそしてまたプロパティを , 区切りで入れて永久に infinite です永久ということですねきりがないとそれを true にしますこれで 最後に行っても止まらずまた最初に戻ります保存して確認しましょうブラウザウィンドのリロードです今度はサクサク切り替わりますそして最後ここで止まりませんまたちゃんと先頭に行ってループが切り替わります実際にはちょっとせわしないですけれどもここはお好みの時間に設定をし直してくださいこのレッスンでは 画像を切り替えるスライダーのプラグインjSlider のオプションを加えてスライダーの設定を変えてみました加えたのは images ですねこれで一瞬パッと消えてしまうのを防ぎました次に切り替え効果を random にanimation ですそして 切り替えの時間auto_slide_interval最後に ループするずっと繰り返し繰り返しループするという設定infinite というのを加えました

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

2時間36分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。