5分で完了！機能的で美しいjQueryスライダーの作り方【レスポンシブ対応】

jQuery 2018年5月16日

はじめに

こんにちは、北陸のwebコーダーdaimaです。

本日は、ECサイトやコーポレートサイト、
ポートフォリオサイトのアイキャッチにぴったりな
レスポンシブ対応jQueryスライダーの設置法を、
サイト制作初心者の方にも分かりやすいように
順を追ってご説明します。

DEMO

このスライダーは、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に書き換えてご利用ください。