logo

小さなお店や女性向け店舗等の
ホームページを作成しております

blog

ブログ

【初心者向け】画像のスライドショープラグイン「slick」導入メモ

スライドショープラグイン「slick」導入メモになります。

ホームページのデザインを作成していて、スライドショーの機能をよく取り入れるので、自分でも作成できるよう、プラグイン「slick」を使用してみました。


目次

    1. 1.「slick」とは
    2. 2.設定方法
    3. 3.コードに書いていく
    4. 4.色を変えたり、いじってみる

1.「slick」とは


スライダーを作成するjQueryのプラグインです。
簡単に言うと、プログラム済みのファイルをダウンロードして、自分で作成したhtmlにクラスを付与することで使えるようになる、超便利なコンテンツです。

使用するのに、自分のPCにダウンロードするする方法と、ネット上においてあるものを読み込んで使用する方法と、2通りあるとのことですが、私は全社の自分のPCにダウンロードして使用しました。

ダウンロードは、公式HPからできます。

トップのGlobalNavi→get it now(今すぐ入手)ページにダウンロードボタンがあります。
クリックして、ダウンロード、zipファイルなので、解凍を行ってください。

2.設定方法

ダウンロードすると、ファイルを下の方へ開いていくと、「slick」という名前のフォルダがあります。
そのファイルに、下記のフォルダやファイル一式が入っています。
この「slick」のフォルダをindex.htmlの階層へコピーしてください。

↓「slick」フォルダ内のファイル(2021.4現在)
☆fonts(フォルダ)
・ajax-loader.gif
・config.rb
・slick-theme.css
・slick-theme.less
☆slick-theme.scss
☆slick.css
・slick.js
・slick.less
☆slick.min.js
・slick.scss

この中で、必須なものは☆印のものになります。(他は適宜削除などしてください。)

これらは現在slickというフォルダの中に入っているので、「slick/~」に入っていることになります。
それから、自分でjQueryを書き込むファイルを作成します。
私は、index.htmlと同じ階層に、「main.js」として作成しました。
場所は任意です。「slick」フォルダ内に「main.js」を作成した場合のurlは「slick/main.jp」となりますので、お気をつけて。
初歩的なことですが。

ここまでできれば、下準備は完了です。
あとはガシガシコードを書いていきます。
下記ページのGlobalNavi→usage(使用方法)にも説明がありますので、良かったらそちらも参照してください。
https://kenwheeler.github.io/slick/

私は理解するのにちょっと時間がかかったので、こちらにメモで残しておこうと思います。

3.コードに書いていく

さあ、[index.html]にガシガシコードを書いていきましょう。

  • <head>タグにslick.cssを追加する

人によって多少書き方は異なるとは思いますが、メインのcssを読み込んでいる下記のようなコードがあると思いますので、それより下に下記のコードを書く。

↓メインのcssを読み込んでいるコード↓
<link rel="stylesheet" href="style.css">

↓その下にこれを書く↓
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

終了bodyタグ(</body>)の前、jQueryの後にslick.jsを追加します(jQuery 1.7以降が必要)

<script type=text/javascript src=“https://code.jquery.com/jquery-2.2.0.min.js></script> <script type=text/javascript src=slick/slick.min.js></script>

つぎは、先ほど自分で作成した「main.js」のjQueryファイルに書いていきます。
<script type=”text/javascript” src=”main.js”></script>

↓ここまで書いたindex.html↓

 

↓style.css↓

↓main.js↓

 

これでベースは完了。
見た目はこうなっているはず。

画像が一枚表示されてる状態。これで大丈夫。
←(前)と→(後ろ)の矢印は、今カラーが白になってるから、表示されていないのです。
では矢印の色を変更してみましょう。

4.色を変えたり、いじってみる

「slick」フォルダ内にある、slick-theme.css を開きます。
矢印のクラスは、
slick-prev と slick-next です。
その中で
.slick-prev:before,
.slick-next:before
の部分に色指定があります。

↓下記9行目で色が変更できます。(slick-theme.cssの中にこの記述があります)

丸になりました^^

そのままスライダーの形を変えてみます。
slickのホームページのデモにある、レスポンシブディスプレイを設定してみました。

↓main.jsをこのように変更

 

head 内に、viewpoint設定を忘れずに記載してください。

こんな表示になりました。レスポンシブデザインに対応していて、画面幅を変えると自動で画像の枚数を変更してくれます。

あとは、cssでマージンや画像サイズを調整したり、色々いじってみましょう!
株式会社BRISK(ブリスク)さんのページにもっと多くのカスタム方法が載っています!参考にしてみてください。

すてきなHP制作を!

それでは。