スライドショーのjQueryプラグイン「slick.js」の組み込み

スライドショーのjQueryプラグイン「slick.js」の組み込み

またまたjQueryのスライドショープラグインの紹介です。

slick.jsの本家サイトです。
ダウンロードは本家でもGitHubでも出来ます。

• 本家
• GutHub

phptemp_slick_160107.zip

slick.jsを組み込んだページのサンプルです。

• 組み込み済みサンプルページ

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. ダウロードしてきたファイルを展開する。
   展開した中からJSファイルをWEBサイトテンプレート（PHP）内の「 /js/ 」に、CSSファイルと画像を「 /css/ 」内にコピーする。
2. CSSと、メインhtmlソースをWEBサイトテンプレート（PHP）に書き込む。
3. JSファイル、CSSファイル、メインhtmlソースを書いたファイル、画像をアップする。

ということで、上記の内容を以下で詳細解説致します。

ダウンロードしてきたフォルダ内にある「 /slick/slick.js 」をそのままWEBサイトテンプレート（PHP）のJSフォルダに入れそのままアップして下さい。

jQueryファイルの指定は、最新版、若しくは動作確認の取れているjQueryが好ましいところです。
オープンに利用出来るソースが公開されていますので、そのファイルを直接指定して下さい。
サンプルページでは jQuery のファイルを直接指定しています。

因みにですが、当サイトのサンプルでは本家サイト内にある”Center Mode”を組み込んでいます。

ダウンロードしてきたフォルダ内にある「 /slick/slick.css 」と「 /slick/slick-theme.css 」をそのままWEBサイトテンプレート（PHP）のCSSフォルダに入れそのままアップして下さい。

また、「 /fonts/ 」フォルダと「 ajax-loader.gif 」ファイルを、「 /css/ 」にアップして下さい。
CSSのファイルと同階層に設置すると便利です。
slick-theme.css ファイルで画像の置き場を決めているので、CSSを調整可能な方は画像の置き場を調整することも出来ます。

次に main.css の修正です。

各種 main.css 3種の中の「メイン画像」の内容を修正しています。
以下のように修正をしています。

#mainbg {
	width: 100%;
	background-color: #ccc;
}

#main {
	width: 1000px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

.center h3 {
	background: #fff;
	color: #3498db;
	font-size: 36px;
	line-height: 230px;
	margin: 20px;
	position: relative;
	text-align: center;
	opacity: 0.8;
	transition: all 300ms ease;
}

.center .slick-center h3 {
	-moz-transform: scale(1.08);
	-ms-transform: scale(1.08);
	-o-transform: scale(1.08);
	-webkit-transform: scale(1.08);
	color: #e67e22;
	opacity: 1;
	transform: scale(1.08);
}

.slick-slide .image {
	padding:10px;
}

.slick-slide img {
	border:5px solid #FFF;
	display:block;
	width:100%;
}

.slick-slide img.slick-loading { border:0 }
.slick-slider { margin:30px auto 50px; }

上記のCSS内の”.center h3”で装飾している”line-height:;”と”margin”を修正することによって、枠の高さと横幅を変えることが出来ます。
3種の main.css でそれぞれ変更を加えています。

CSSの次はhtmlソースの記述です。 まずは、メイン画像の箇所に以下の記述に修正をします。

<div id="mainbg">
<div id="main">
<div class="center">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</div>

htmlソースの中にJSの記述をしなければいけません。

<script>
  $(function(){
$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
  });
</script>

サンプルではヘッダ内に記述しています。

上記はレスポンシブ対応のために、レスポンシブにする際のブレイクポイントの横幅を記載しています。
それぞれ、環境に併せて修正して下さい。

htmlの「 class="center" 」、JavaScriptの「.center」は、それぞれ一致していればお好きな” id ”か” class ”にして頂けます。

その他のオプションについては、本家サイトでも記載されていますので、直接ご確認ください。

CSSファイル、htmlファイル、jsファイル、画像のそれぞれをサーバーにアップして下さい。
あとは動作確認を取り、様々なケースでの記述を試して理解すれば、これにて作業完了です。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• main.css（3種）の「メイン画像」の記述を修正しています。
• スライドショーはトップページのみですので、それぞれのファイルはトップページのみ読み込ませています。
• スライドする箇所に画像は使っていませんが、テキストではなく画像、若しくは背景を差し込んで頂いても問題ございません。

slick.jsの組み込みに際して、文字部分などの装飾箇所の手配に少し手間取ってしまいました。
こういう言い方は本当はよくないと思いますが、本家サイトにはサンプルはあるモノの組み込みに関する説明が少なく若干戸惑いました。苦笑
オプションの表示は積極的にして頂いているようですが・・・という感じです。

スライドショーの大半の目的は画像を奇麗に見せることだと思いますので、本来は画像で表示すべきだったかもしれません。
ただ、テキスト部分の装飾をすることで文字位置を変えたり、背景に画像を入れるなどの配慮が出来るため、コンテンツ的に好ましいサンプルを組み込んだ次第です。
若干面倒な箇所もありますが、是非使ってみて下さい！

執筆 : 清水 隼斗