お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

スライドショーが簡単に作れるbxsliderが便利過ぎる

2020.10.31
WEBデザイン
CSSJavaScript
なんか難しそうなスライドショーが、やってみたら超簡単に実現できた！

こんな奴ですね。
（今どきないと思いますが、当然、javascriptが動かないブラウザでは画像が羅列されるだけとなります。）

最近の企業HPのトップページなども、画面いっぱいの画像が差し替わっていくようなデザインが多いですよね。

例：野村證券　日本ガイシ　任天堂

こういうプロっぽいデザイン(笑)も、これを仕えば簡単に実現できるわけですね。（例にあげたサイトがbxsliderを使っているのかどうかは知りませんが。）
公式サイト

「Click here to install」と書いてありますが、クリックすると設定方法の解説が表示されるだけですね。

その解説に従えば、使い方は超簡単でした。

手順は

(1)ヘッダーにスタイルとスクリプトのリンクを追記
(2)スライダーのスクリプトを記入
(3)要素を並べる
(1)ヘッダーにスタイルとスクリプトのリンクを追記
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 
ヘッダーとは、<head＞から</head>の間です。

※COCOON（WordPress）を使っている場合は、テーマエディタから「tmp-user」の中にある「head-insert.php」に書き込めばOKですね。

(2)スライダーのスクリプトを記入
<script> $(document).ready(function(){ $('.slider').bxSlider(); }); </script> 
スクリプトの記入位置はヘッダが基本ですが、同じ記事内に書いてしまってもOKですね。スライドショーを複数設置して設定を分ける必要がある場合などは、ヘッダだと分かりにくいケースもあるかも？

(3)スライダーの領域を用意して、要素を並べる
<div class="slider"> <img src="画像１" alt="" /> <img src="画像２" alt="" /> <img src="画像３" alt="" /> </div> 



要素と書いているのは、画像以外も行けるんですね。
行く川のながれは絶えずして
しかも本の水にあらず
よどみに浮ぶうたかたは
かつ消えかつ結びて久しくとゞまることなし
世の中にある人とすみかと
またかくの如し



画像と混在でもいけますね。。。
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。
そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った
オプションの書き方や動かない時のチェックポイントなどは 次記事にて

コメント