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

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  2. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  3. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  4. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  5. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

  6. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

コメント

  • コメント (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. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
  2. レポート

    kindle Paperwhite買いました。iPad miniとの違いやメリッ…
  3. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
  4. 日記

    2015年の振り返りと今年の抱負
  5. デザイン

    お店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
PAGE TOP