記事の詳細
簡単にスライダーを実装して動きのあるWEBサイトにしたい！bxSliderの使い方！
こんにちは。今回は「bxSliderの実装方法」について紹介します。
皆さんは、画像が自動でスライドするなど動きのあるWebサイトを見たことはありますか。
例えば、通販サイトでは、特集やセール開催を告知するうえで目立つよう取り入れていると思います。
本日紹介するbxSliderは先述の動きをするプラグイン※の中でも使いやすいものとなります。
※プラグイン：ソフトウェアに機能を追加する小さなプログラムのこと。
はじめに
webサイトを制作する手順に則って、事前にフォルダ、ファイルを準備編にて用意していきます。
今回の記事はローカル環境による説明となります。サーバーをお持ちでない方は、下記の記事を参考のうえ制作を進めてくださいね！
bxSlider準備編―必要な環境を整えましょう！※ローカル環境の場合を想定
①デスクトップなどに任意の名称で1つフォルダを作り（以降sampleとします）、さらにその中に「css」「js」「img」の名称で各フォルダを作成。
②任意のテキストエディタを使い、「index.html」「style.css」「reset.css」の名称で各ファイルを作成。cssファイルはcssフォルダに移動。（今回はstyle.cssは必須ではありません。）
③reset.cssには、下記の基本コードをコピー&ペースト。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } |
④index.htmlには、下記の基本コードをコピー&ペースト。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <title>jQueryの練習</title> </head> <body> <ul class="slider"> <li><img src="img/sample_01.png"></li> <li><img src="img/sample_02.png"></li> <li><img src="img/sample_03.png"></li> </ul> </body> </html> |
⑤style.cssには、下記の基本コードをコピー&ペースト。
|
1 |
@charset 'utf-8'; |
⑥最後に、imgフォルダに3枚の画像を用意し、各々「sample_01」「sample_02」「sample_03」の名称で保存。（今回は1280×700の画像を使用）
これで準備完了です！
bxSlider実装編ー動かしていきましょう！
①https://bxslider.com/にアクセスし、「Click here to install」をクリック。
②The Other Waysの「1.Download jquery.bxslider.zip here」から必要データをダウンロード。
③ダウンロード後、右クリックですべて展開。（2018/10/04時点でファイル名は「bxslider-4-4.2.12」）
④「src」＞「css」の順で進み、「jquery.bxslider.css」を準備編のsample内、cssフォルダにコピー&ペースト。
⑤再度、https://bxslider.com/にアクセスし、「index.html」にThe Easy Wayのコード①②をコピー&ペースト。挿入後は画像2枚目のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <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> <script> $(document).ready(function(){ $('.slider').bxSlider(); }); </script> <title>jQueryの練習</title> </head> <body> <ul class="slider"> <li><img src="img/sample_01.png"></li> <li><img src="img/sample_02.png"></li> <li><img src="img/sample_03.png"></li> </ul> </body> </html> |
⑥最後に2つの記述を追加します。まず下記★のコードを<link rel=”stylesheet” href=”css/style.css”>の後ろに、また下記◆のコードを$(‘.slider’).bxSlider({ });の中に挿入。
★bxSliderの既存デザインを読み込む記述
|
1 |
<link rel="stylesheet" href="css/jquery.bxslider.css"> |
◆自動でスライド、スピードを2秒にする記述
|
1 2 |
auto: true, speed: 2000, |
すべて挿入したhtmlの完成版は下記となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <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> <script> $(document).ready(function(){ $('.slider').bxSlider({ auto: true, speed: 2000, }); }); </script> <title>jQueryの練習</title> </head> <body> <ul class="slider"> <li><img src="img/sample_01.jpg"></li> <li><img src="img/sample_02.jpeg"></li> <li><img src="img/sample_03.jpeg"></li> </ul> </body> </html> |
⑦こちらは余談ですが、「jquery.bxslider.css」ファイルの「.bx-wrapper img」の項目に下記を上書きすると、画像が全画面表示されます。
|
1 2 3 4 5 |
.bx-wrapper img { max-width: initial; display: block; width: 100%; } |
完成！！下記は画像となります。
以上です。
スライドする画像を複数表示させる方法など、その他のオプションについては次回以降のブログで解説していきます。途中にも出てきていたThe Other Waysの実装方法もありますので、ぜひ挑戦してみてくださいね！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
この記事へのコメントはありません。