スライドショーFlexSliderを実装する方法

こんばんは! Benです。うちの娘のインフルエンザもようやく収まりつつあって、いつもの反抗期に戻ってきました(^^; それにしても、初期症状は37度前後で鼻水が止まらないなどの風邪そっくりだったので、念のための検査キットでA型判定になってイナビル処方されました。その晩40℃近く出て具合悪さMAX、息荒過ぎて過呼吸になるほど症状が重かったです。でも、抗ウイルス薬の処方が早かったので、2日で改善しました。嫁もうつって最悪 皆さんも風邪っぽい程度でもこの時期は念のため、検査したほうがいいかも。ということで、ようやくブログ再開です。

今回は御覧のスライドショーをホームページに設置しよう!です。今回はパソコン専用版です。スマホなどのモバイルから閲覧している方は正常に表示されません。ごめんなさいm(_ _)m このブログはモバイルページの編集が制限されているので、スライドショーの実装ができませんでした。

これはFlexSliderというもので、JavaScriptというホームページで動的な処理などを行う言語ですが、これをより簡便に使うためのライブラリとしてjQueryがあります。これを使ったスライドショーがこのFrexSliderです。スライドショーのように自動で切り替えて表示できます。

まずはjQuery本体のダウンロードです。ここからです。バージョン2.Xのproductionを使います。それをWEBサーバの所定の位置にアップロードして、対応するようにタグで記載します。

次にFlexSliderはこちらからダウンロードできます。この中の下記にあるflexslider.jsとflexslider.cssを用います。





上記のhead内の一番最後に入れるだけでいいようです。jsとcssファイルは無事動きました。

こちらは流し込み先のhtmlです。大きくdivタグでくくり、その中に箇条書きのulとそれぞれのリストのliタグを入れます。liタグの一つ一つがスライドショーの画像になります。divとulにそれぞれご覧のクラス指定をすれば、後はjsとcssでスライドショーになるようです。便利ですね!

ただ、の場合はブログのシステムですでにjQueryを読み込んでいる時があって、しかもその位置がbody内だったり、通常の記事の書き方では動かすのが難しいので工夫が必要でした。やはり自前のWEBサイトがほしいですね(^o^) そのほか、ナビゲーターや便利な機能もありますが、今回はオプションでそれらを消しています。機会があればこの辺もノートします。

この記事へのコメント


この記事へのトラックバック