[jQuery]簡単！スライドショーを作ろう!!
Webの世界は分進秒歩くらいの勢いで変わっていきますが、そのなかでも未だによく使われるみんな大好き（？）スライドショーについて今回は書きたいと思います。幾つかの画像を用意して時間遷移で見せていくのですが、スライドショー自体に長い歴史があるようで様々なやり方があります。今回は比較的簡単なものを紹介します。
bxSlider
レスポンシブデザイン対応のスライダープラグインです。
オプションが多く、軽くて実装の容易さから実際の現場でもよく使われているみたいです。
使い方
- CSSとJSファイルをHTMLに読み込んで
- 画面部分をマークアップ
- JSファイルを呼び出すスクリプトを書きます
それでは、サクッといきましょう。
bxSliderを準備
以下の公式ページから、右上にあるボタンをクリックして一式をダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider
ダウンロードして解凍したフォルダから、jquery.bxslider.css と jquery.bxslider.min.js をHTMLに埋め込みます。
もうひとつやり方がありまして、CDNを使う方法があります。
CDNは コンテンツデリバリーネットワーク の略で、インターネット経由でファイルを読み込めるようになっています。
1 2 3 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
これをHTMLに埋め込みます。
CDNを紹介したので、jQuery本体はCDNで読み込んでしまいましょう。
1 2 3 | <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> |
だいたい下の感じになったら、準備完了。コーディング開始です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="jquery.bxslider.min.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="jquery.bxslider.min.js"></script> </body> </html> |
マークアップ
画像部分を<body>内にマークアップします。
1 2 3 4 5 6 | <ul class="bxslider"> <li><img src="./images/sample1.jpg"></li> <li><img src="./images/sample2.jpg"></li> <li><img src="./images/sample3.jpg"></li> <li><img src="./images/sample4.jpg"></li> </ul> |
スクリプトを記述
次に</body>の上、jquery.bxslider.min.js の下にスクリプトを記述します。
1 2 3 4 5 | <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
全体の文書構造はこちら。
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"> <title>Document</title> <link rel="stylesheet" href="jquery.bxslider.min.css"> </head> <body> <ul class="bxslider"> <li><img src="./images/sample1.jpg"></li> <li><img src="./images/sample2.jpg"></li> <li><img src="./images/sample3.jpg"></li> <li><img src="./images/sample4.jpg"></li> </ul> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script> <script src="jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> </body> </html> |
これで、デフォルト状態のbxSliderが完成です。
See the Pen bxslider-test by necomacustom (@tamayura) on CodePen.27739
矢印や枠線が要らない場合は、
bxslider.cssファイルを読みこまなければOKです。豊富なオプションがあると書いてしまった手前、よく使いそうなものを幾つか紹介します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> $(document).ready(function(){ $('.hoge').bxSlider({ mode: fade, //スライドモードの指定・デフォルトは'horizontal'(水平移動) speed: 1000, //スライドの速さを変更・デフォルトは500 pager: false, //ページャー（スライド下の「・・・」）を表示・デフォルトはtrue controls: false, //コントロール（左右の矢印）を表示・デフォルトはtrue nextText: '次へ' , //「次へ」ボタンのテキストを指定・デフォルトは'Next' prevText: '前へ', //「次へ」ボタンのテキストを指定・デフォルトは'Prev' auto: true, //自動でスライド・デフォルトはfalse pause: true, //自動でスライドする時の停止時間をミリ秒で指定・デフォルトは4000 }); }); </script> |
こんなところでしょうか。実際に書いて確かめてみてくださいね。
豊富すぎるオプション…その他は公式サイトをご覧ください。
Options | Responsive jQuery Slider | bxSlider
Slick.js
“最後のカルーセル”というくらいに満を持して登場したらしいスライドプラグインです。
bxSliderと同じく多機能・簡単実装です。
使い方
bxSliderと同じです。
ダウンロードしたファイルをHTMLに読み込ませて、画面部分をマークアップして、スクリプトを書く、です。さっそく行きましょう。
slickの準備
公式サイトの”get it now”をクリックするとダウンロードボタンまでスクロールしますので、ボタンをクリックしてダウンロードしたフォルダを解凍して、slick.cssとslick.jsファイルをHTMLに読み込ませます。
slick – the last carousel you’ll ever need
その少し下にCDNもありますので、お好みで埋め込んでください。
見た目をカスタマイズせずにサクッと使いたい場合は、slick-theme.cssもご一緒に。
マークアップ・スクリプト
やり方はbxSliderの時と同じです。
デフォルト状態のスクリプトはたったのこれだけ。
1 2 3 | <script> $('.slider').slick(); </script> |
もちろん、slick();の（）間にオプションを追加可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"> </head> <body> <ul class="slider"> <li><img src="./images/sample1.jpg"></li> <li><img src="./images/sample2.jpg"></li> <li><img src="./images/sample3.jpg"></li> <li><img src="./images/sample4.jpg"></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <script> $('.slider').slick(); </script> </body> </html> |
デモはこちら…背景が透明だとボタンが見えないです。CSSでカスタマイズが必要ですね。
See the Pen slick-test by necomacustom (@tamayura) on CodePen.27739
bxSliderと比較すると、ボタンの位置と、ページャーの制御を呼び出してやるのかやらないのかの違いがありますがこちらも簡単です。
そして、こちらも豊富なオプションがあります。よく使いそうなのは以下です。
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 | $('.slider').slick({ slidesToShow: 1, //画面上に何個表示させるか slidesToScroll: 1, //何個ずつスクロールさせるか autoplay: true, //自動再生させるか autoplaySpeed: 4000, //自動再生の間隔 dots: false, //下のドットは表示させるか arrows: true, //左右のナビゲーションは表示させるか infinite: true, //ループさせるかどうか centerMode: true, //表示中のスライドをセンターに配置するか responsive: [ //レスポンシブの設定 { breakpoint: 1024, //ブレークポイント1の値 settings: { //ブレークポイント1のオプション slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, //ブレークポイント2の値 settings: { //ブレークポイント2のオプション slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 400, //ブレークポイント2の値 settings: "unslick" //slickを使わない }] }); |
こちらも豊富すぎ…ブレイクポイントによって設定を変えられるのが個人的に大きなポイントです。
公式サイトはかなり丁寧に作られていますので、いろいろな表現ができそう。
実装してワーイ！となるのではなく、さらなる研究の余地があります。
おまけ
本当にいっぱいあるんです。スライドショー…
一番初めに私が作ったポートフォリオは、クリックすると画像が浮かび上がるLightBoxとふわっと画像が切り替わる、現在は公開されていないプラグインのカルーセルでした。今にして思うと陳腐なサイトでしたが、仕組みを覚えるよりもまず動くことに感動したのを今でも覚えています。
おまけの章に置いてあるリンクや、今回紹介したスライドショー以外にもいっぱいプラグインがありますので、良さそうなものがあったらぜひ紹介してくださいね。私もさらに研究していきます。ねこま（@necomacustom）でした。