HOME > コラム > WEB全般 > スライドショーのjQueryプラグイン「slick.js」の組み込み

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

コラム

今回はスライドショーのjQueryプラグイン「slick.js」の組み込みについて紹介致します。
今回のjQueryプラグインはオプションが充実しているのが特徴です。
本家サイトに色々なオプションが表示されていますので、気になる方は是非見てみて下さい。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

slick.jsサイトイメージ
slick.jsとは?
slick.jsとは、jQueryを使ったスライドショーをつくるためのJavaScript

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

slick.jsの配布サイト

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

ダウンロードと組み込みサンプル
slick.js組み込み済みファイルのダウンロード
phptemp_slick_160107.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

slick.jsファイルのアップとjQueryファイルの指定

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

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

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

CSSファイルのアップと画像のアップ

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

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

CSSとhtmlとJSの記述

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

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

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP