皆さんこんにちは、mayukouです。
今回は、スライダープラグイン、slickの使い方をご紹介します。トップページのヒーローヘッダーにも使えます。
slickは、jqueryでできています。レスポンシブデザインにも対応し、スマホ、タブレット、PCなどあらゆるデバイスサイズに適応できます。
スポンサードリンク
ヒーローヘッダーとは
ヒーローヘッダーとは、ホームページのファーストビューにあたる、一番上の画像がくるヘッダーの部分のことを指します。ホームページのメインビジュアルです。
このファーストビューとなるヒーローヘッダーをスライドにすることで、より引きつけるホームページを作れます。
slickの使い方
1.公式サイトより、プラグインをダウンロードします。
公式サイト(英語)から、ファイル一式をダウンロードします。zipファイルを解凍しましょう。
そして、使用するファイルは赤で囲っているファイルになります。「slick」フォルダを使用します。
slickフォルダの中身がこちら。
使用するファイルをそれぞれのフォルダに格納します。
2.スライダーを入れたいところにスライダーのHTMLを挿入
以下のように、divで大きく括って、さらにその下に各divにスライダーコンテンツを挿入していきます。
3.head部分に以下のコードを入れます
指定ファイルの場所(相対パス)を間違えないようにしましょう。
スクリプトはbodyタグの直前に設置するといいでしょう。
jqueryファイルは、こちらからダウンロードしてください。
1 2 |
<script type="text/javascript" src="assets/js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="assets/js/slick.min.js"></script> |
CSSは、headタグ内に配置します。
1 |
4.jQueryの挙動の指定をする
以下のスクリプトをbodyタグの直前に設置します。こちらで、
いろいろな挙動を指定することができます。
1 2 3 4 5 6 7 8 9 |
<script> $('.slider').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear' }); </script> |
5.slick-theme.cssの中のajax-loader.gifとfontsの相対パスを修正する。
‘../img/ajax-loader.gif’
‘../fonts/slick.eot’
などとします。
画面サイズに合わせたスライダーにするには
レスポンシブにするには、画像幅を100%指定にしましょう。
1 2 |
img {width:100%; height:auto;} |
6.左右の矢印を表示するには
デフォルトでは、矢印がスライダーの外にあり、しかも色が白なので見つけることが困難です。
そのため、slick-theme.css内にある
.slick-prevと.slick-nextの絶対配置の位置のマイナスを外します。
また、.slick-prevはなぜかz-indexが下になっていたので、z-index:10にしてみました。
すべてのコードはこちら
1 |
1 |
デモのご紹介
こちらがデモになります。
Slickのデモ
最後に
いかがでしたか?スライダーは使えると便利なので、ぜひサイトに生かしてみましょう。
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。