jQuery

ヒーローヘッダーに使えるスライダーjQueryプラグインSlickの使い方


皆さんこんにちは、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のデモ

最後に

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

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  2. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  3. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  4. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  5. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  6. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ
  2. Web Design

    今流行りのロングシャドウの簡単な作り方
  3. illustration

    photoshopでモコモコの線を描くには?
  4. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  5. Web Design

    今すぐできる!HTMLメールの作り方
PAGE TOP