arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[jQuery]簡単!スライドショーを作ろう!!

Webの世界は分進秒歩くらいの勢いで変わっていきますが、そのなかでも未だによく使われるみんな大好き(?)スライドショーについて今回は書きたいと思います。幾つかの画像を用意して時間遷移で見せていくのですが、スライドショー自体に長い歴史があるようで様々なやり方があります。今回は比較的簡単なものを紹介します。

bxSlider


レスポンシブデザイン対応のスライダープラグインです。
オプションが多く、軽くて実装の容易さから実際の現場でもよく使われているみたいです。

使い方

  1. CSSとJSファイルをHTMLに読み込んで
  2. 画面部分をマークアップ
  3. JSファイルを呼び出すスクリプトを書きます

それでは、サクッといきましょう。

bxSliderを準備

以下の公式ページから、右上にあるボタンをクリックして一式をダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider
ダウンロードして解凍したフォルダから、jquery.bxslider.cssjquery.bxslider.min.js をHTMLに埋め込みます。

もうひとつやり方がありまして、CDNを使う方法があります。
CDNは コンテンツデリバリーネットワーク の略で、インターネット経由でファイルを読み込めるようになっています。

これをHTMLに埋め込みます。
CDNを紹介したので、jQuery本体はCDNで読み込んでしまいましょう。

だいたい下の感じになったら、準備完了。コーディング開始です。

マークアップ

画像部分を<body>内にマークアップします。

スクリプトを記述

次に</body>の上、jquery.bxslider.min.js の下にスクリプトを記述します。

全体の文書構造はこちら。

これで、デフォルト状態のbxSliderが完成です。

See the Pen bxslider-test by necomacustom (@tamayura) on CodePen.27739


矢印や枠線が要らない場合は、bxslider.cssファイルを読みこまなければOKです。
豊富なオプションがあると書いてしまった手前、よく使いそうなものを幾つか紹介します。

こんなところでしょうか。実際に書いて確かめてみてくださいね。
豊富すぎるオプション…その他は公式サイトをご覧ください。
Options | Responsive jQuery Slider | bxSlider

Slick.js


“最後のカルーセル”というくらいに満を持して登場したらしいスライドプラグインです。
bxSliderと同じく多機能・簡単実装です。

使い方

bxSliderと同じです。
ダウンロードしたファイルをHTMLに読み込ませて、画面部分をマークアップして、スクリプトを書く、です。さっそく行きましょう。

slickの準備


公式サイトの”get it now”をクリックするとダウンロードボタンまでスクロールしますので、ボタンをクリックしてダウンロードしたフォルダを解凍して、slick.cssslick.jsファイルをHTMLに読み込ませます。
slick – the last carousel you’ll ever need
その少し下にCDNもありますので、お好みで埋め込んでください。
見た目をカスタマイズせずにサクッと使いたい場合は、slick-theme.cssもご一緒に。

マークアップ・スクリプト

やり方はbxSliderの時と同じです。
デフォルト状態のスクリプトはたったのこれだけ。

もちろん、slick();の()間にオプションを追加可能です。

デモはこちら…背景が透明だとボタンが見えないです。CSSでカスタマイズが必要ですね。

See the Pen slick-test by necomacustom (@tamayura) on CodePen.27739


bxSliderと比較すると、ボタンの位置と、ページャーの制御を呼び出してやるのかやらないのかの違いがありますがこちらも簡単です。
そして、こちらも豊富なオプションがあります。よく使いそうなのは以下です。

こちらも豊富すぎ…ブレイクポイントによって設定を変えられるのが個人的に大きなポイントです。
公式サイトはかなり丁寧に作られていますので、いろいろな表現ができそう。
実装してワーイ!となるのではなく、さらなる研究の余地があります。

おまけ

本当にいっぱいあるんです。スライドショー…



一番初めに私が作ったポートフォリオは、クリックすると画像が浮かび上がるLightBoxとふわっと画像が切り替わる、現在は公開されていないプラグインのカルーセルでした。今にして思うと陳腐なサイトでしたが、仕組みを覚えるよりもまず動くことに感動したのを今でも覚えています。
おまけの章に置いてあるリンクや、今回紹介したスライドショー以外にもいっぱいプラグインがありますので、良さそうなものがあったらぜひ紹介してくださいね。私もさらに研究していきます。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP