皆さんこんにちは、mayukouです。
今回は、スライダープラグイン、slickの使い方をご紹介します。トップページのヒーローヘッダーにも使えます。
slickは、jqueryでできています。レスポンシブデザインにも対応し、スマホ、タブレット、PCなどあらゆるデバイスサイズに適応できます。

ヒーローヘッダーとは

ヒーローヘッダーとは、ホームページのファーストビューにあたる、一番上の画像がくるヘッダーの部分のことを指します。ホームページのメインビジュアルです。
このファーストビューとなるヒーローヘッダーをスライドにすることで、より引きつけるホームページを作れます。

slickの使い方

1.公式サイトより、プラグインをダウンロードします。

公式サイト（英語）から、ファイル一式をダウンロードします。zipファイルを解凍しましょう。
そして、使用するファイルは赤で囲っているファイルになります。「slick」フォルダを使用します。

slickフォルダの中身がこちら。

使用するファイルをそれぞれのフォルダに格納します。

2.スライダーを入れたいところにスライダーのHTMLを挿入

以下のように、divで大きく括って、さらにその下に各divにスライダーコンテンツを挿入していきます。

 

3.head部分に以下のコードを入れます

指定ファイルの場所(相対パス)を間違えないようにしましょう。
スクリプトはbodyタグの直前に設置するといいでしょう。
jqueryファイルは、こちらからダウンロードしてください。

CSSは、headタグ内に配置します。

4.jQueryの挙動の指定をする

以下のスクリプトをbodyタグの直前に設置します。こちらで、
いろいろな挙動を指定することができます。

5.slick-theme.cssの中のajax-loader.gifとfontsの相対パスを修正する。

‘../img/ajax-loader.gif’
‘../fonts/slick.eot’
などとします。

画面サイズに合わせたスライダーにするには

レスポンシブにするには、画像幅を100%指定にしましょう。

6.左右の矢印を表示するには

デフォルトでは、矢印がスライダーの外にあり、しかも色が白なので見つけることが困難です。
そのため、slick-theme.css内にある
.slick-prevと.slick-nextの絶対配置の位置のマイナスを外します。
また、.slick-prevはなぜかz-indexが下になっていたので、z-index:10にしてみました。

すべてのコードはこちら

 

デモのご紹介

こちらがデモになります。
Slickのデモ

最後に

いかがでしたか？スライダーは使えると便利なので、ぜひサイトに生かしてみましょう。