5分で完了!機能的で美しいjQueryスライダーの作り方【レスポンシブ対応】
jQuery 2018年5月16日
はじめに

こんにちは、北陸のwebコーダーdaimaです。
本日は、ECサイトやコーポレートサイト、 ポートフォリオサイトのアイキャッチにぴったりな レスポンシブ対応jQueryスライダーの設置法を、 サイト制作初心者の方にも分かりやすいように 順を追ってご説明します。
このスライダーは、slick.jsという jQueryプラグインを用いて実装されており、 主に次のような特徴を持っています。
- 主要ブラウザ(Chrome、Firefox、IE、safari)に対応
- スライド速度や切り替えタイミングをミリ秒単位で調整可能
- ページ送り機能付き
- 現在のスライド枚数を表示するポインタ付き
- レスポンシブ対応で、ウィンドウ幅によるオプション切り替えも可能。
- 拡張性、保守性が高く、コールバックやアクションが豊富。
ページ送りやポインタは、 お好みでON/OFFすることも簡単です。 それでは早速、実装法を見ていきましょう
slickスライダーの実装法
slick.jsをダウンロードする
まずは、今回使用する jQueryプラグイン、slick.jsを ダウンロードします。
私はこれまで案件でbxSliderやsliderProなど 様々なスライダープラグインを利用してきましたが、 柔軟性、拡張性、扱いやすさなどを総合すると このslick.jsが最もおすすめの スライダープラグインであると考えています。
slick.js公式サイトslickを入手するには、 まず上記リンクからslick.js公式サイトへ飛んで、 上部メニュー内「get it now」→「Download Now」をクリックし プラグインフォルダを入手します。
ちなみに、今回使用する ファイルは以下の通り。
- slick.js
- slick.css
- slick-theme.css
- slick.ttf
- slick.woff
HTMLコード
プラグインをダウンロードしたら slick.js、slick.css、slick-theme.cssを ページ内に読み込んで、 次のようにコードを記述していきます。
<div id="main"> <div class="bl_sliderBlock"> <div class="bl_sliderBlock_slide"> <img src="[スライドさせたい画像URL]" alt="[altテキスト]"><!--←スライド表示させたい画像URLを入力します--> </div> <div class="bl_sliderBlock_slide"> <img src="[スライドさせたい画像URL]" alt="[altテキスト]"> </div> <div class="bl_sliderBlock_slide"> <img src="[スライドさせたい画像URL]" alt="[altテキスト]"> </div> <div class="bl_sliderBlock_slide"> <img src="[スライドさせたい画像URL]" alt="[altテキスト]"> </div> </div> </div>
.bl_sliderBlockがスライダー全体、 .bl_sliderBlock_slideが各スライドとなります。
[スライドさせたい画像URL]には スライドさせたい画像のURLを、 [altテキスト]には、画像が表示されなかった場合に 表示する代替文をそれぞれ入力してください。
CSSコード
.bl_sliderBlock{ margin-left: auto; margin-right: auto; margin-bottom: 40px; } .el_menuSliderCounter{ padding: 10px 0 0; text-align: center; font-size: 18px; letter-spacing: 0.2em; } .slick-initialized .slick-slide{ position: relative; } .bl_sliderBlock_slide > img{ width: 100%; max-width: 790px; } /*スライダー送り矢印のCSS*/ .slider-arrow{ position: absolute; cursor: pointer; z-index: 1; top: calc(50%); transform: translateY(-50%); } .slider-arrow.slider-prev{ left: calc((100% - 800px)/2 - 30px); transform: translate(-100%,-50%); } @media screen and (max-width: 640px){ .slider-arrow.slider-prev{ transform: translate(0,-50%); left: 20px; } } .slider-arrow.slider-next{ right: calc((100% - 800px)/2 - 30px); transform: translate(100%,-50%); } @media screen and (max-width: 640px){ .slider-arrow.slider-next{ transform: translate(0,-50%); right: 20px; } } .slider-arrow img{ width: 35px; height: 50px; }
.bl_sliderBlock_slide > imgの max-widthは表示させたい 画像幅に合わせて任意で変更してください。
javascriptコード
sliderSet(); function sliderSet(){ var $slider = $('.bl_sliderBlock'); $slider.each(function(index){ $slider.slick({ slidesToShow: 1, //一度に表示するスライド枚数 autoplay: true, //自動スライドするか(true or false) autoplaySpeed: 5000, //自動スライド速度(ミリ秒単位) pauseOnFocus: false, //スライドクリック時に停止するか(true or false) draggable: false,//ドラッグでスライダーを動かせるか(true or false) speed: 800,//ページ送りの速度(ミリ秒単位) centerMode: true,//表示中の画像を中おい配置するか(true or false) pauseOnHover:false,//マウスオーバー時にスライドを止めるか(true or false) dots: true,//現在の表示を示すポインタを表示するか(true or false) arrows: true,//ページ送りの矢印を表示するか(true or false) fade: false,//スライドの仕方をフェードインアウトにするか(true or false) variableWidth: true,//スライダー内の画像サイズを本来の画像サイズにするか(true or false) prevArrow: '<div class="slider-arrow slider-prev"><img src="[一つ戻るボタン矢印の画像URL]"></div>',//ひとつ前に戻るボタンのHTML nextArrow: '<div class="slider-arrow slider-next"><img src="[一つ進むボタン矢印の画像URL]"></div>',//ひとつ進むボタンのHTML responsive: [ { breakpoint: 640,//ウィンドウサイズ640px以下の場合は以下の設定を適用 settings: { centerPadding: '0', centerMode: false, variableWidth: false, } } ], }); }); }
slickには様々なオプションが存在し、 数あるスライダープラグインの中でも 抜群の柔軟性を誇っています。
スライダーの速度や切り替えタイミング、 スワイプ設定などはもちろん、 豊富なメソッドとコールバック関数を駆使すれば オートスライドの開始タイミングをずらしたり、 次のスライドまでの時間をタイマー形式で 表示することもできたりします。
ちなみに、進む/戻るボタンのHTMLも ここでタグを指定して生成しています。 [一つ戻るボタン矢印の画像URL]と [一つ進むボタン矢印の画像URL]部分には、 それぞれ任意のURLに書き換えてご利用ください。
おわりに
スライダーの実装、上手く行きましたでしょうか?
いまやリッチなウェブ表現に欠かせないスライダーですが、 その奥は深く、凝ったものを作ろうと思うと一気に難易度が上がる、 サイト制作社泣かせのギミックだったりします(笑)
これをご覧の皆さんも、
javascriptに慣れたらぜひ、
さらにテクニカルなスライダーの
実装に挑戦してみてください。
それでは!