それでは、本日はとてもシンプルなスライドショーを表示する方法をご案内しますね
こんにちは、ikuxxと申します。
今回は、出来るだけシンプルで簡単、コピペでOK、jQueryプラグイン「bxslider」を使ってトップページにスライドショーを表示する方法のご紹介。
【CSS, JavaScript】コピペで簡単 シンプルなスライドショー(bxslider)
スライドショーを表示する方法というのは、インターネット上に様々な「jQueryプラグイン」があったりもするのですが、
今回は「bxslider」というものを使った方法で、画像のフェードイン、フェードアウトでのシンプルな方法をご紹介
順序としては、
「bxslider」はこちらから。
「jquery.bxslider.js」は、普段自分がJavaScriptを読み込む時のフォルダ内に保存。
「jquery.bxslider.css」をCSSフォルダに、もしくは中のコードをコピーして使ってもOK。
上のCSSファイルを読み込む時は、
|
1 |
<link rel="stylesheet" href="css/jquery.bxslider.css"> |
でファイルを読み込むのを忘れずに。
HTML部分
|
1 2 3 4 5 6 7 8 |
// HTML部分 <ul class="bxslider"> <li><img src="画像ファイル" alt=""></li> <li><img src="画像ファイル" alt=""></li> <li><img src="画像ファイル" alt=""></li> <li><img src="画像ファイル" alt=""></li> </ul> |
CSS部分：ここで表示方法やサイズの設定をする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// CSS部分 .bxslider img { /* ここで画像を画面いっぱいに広げる */ width: 100%; height: 100vh; object-fit: cover; } .bx-controls { display: none; /* 必要のない要素を隠す */ } .bx-wrapper { font-size: 0px; /* これを入れる事により画像周りの謎の空白が消える */ } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
// JavaScript $(function() { $('.bxslider').bxSlider({ mode: 'fade', // 今回はフェードイン[,]を必ず忘れずに speed: 5000, // 5秒でゆっくりと変わっていくように auto: true, // クリックしなくても自動的に変わっていくように infiniteLoop: true, // 繰り返し }); }); |
これで終わり。
そうすると、画像が画面上いっぱいに広がって勝手にフェードイン、フェードアウトをしてくれるはず。
注意点としては、jQueryを読み込む時はきちんと、
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
こういったものを書くのを忘れずに。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
最近はマレーシアに住んでるおかげで中国語もちょこちょこ伸びてきてます。
YouTubeもやってます。
このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい
最近はマレーシアに住んでいますが、数年後にはヨーロッパ、その後は中国に住みたいなと考えています。
また久々カナダに住むのもいいかも。
でも最終的にはやっぱり日本かな。
季節はあるし、食べ物も美味しいし
何だかんだでやっぱり日本は最高ですね。
トップ画面でスライドショーを表示する方法が分からない
インターネットで検索してみても、やり方がいろいろと多過ぎてどれがいいのかいまいち
どうにか簡単に出来る方法はないかなぁ？