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↓

  1. <!DOCTYPE html>
  2. <html lang=“ja”>
  3. <head>
  4.     <meta charset=“UTF-8”>
  5.      <title>Demo slick</title>
  6.      <meta name=“description” content=“”>
  7.     <meta name=“robots” content=“noindex”>
  8.     <!– CSS –>
  9.     <link rel=“stylesheet” href=“https://unpkg.com/ress/dist/ress.min.css”><!– ress.cssの設定–>
  10.     <link rel=“stylesheet” href=“style.css”>
  11.     <!– slick-css –>
  12.     <link rel=“stylesheet” type=“text/css” href=“slick/slick.css”/>
  13.     <link rel=“stylesheet” type=“text/css” href=“slick/slick-theme.css”/>
  14.     <!– レスポンシブ対応時viewport設定 –>
  15.     <meta name=“viewport” content =“width=device-width,initial-scale=1.0”>
  16.     <link rel=“stylesheet” href=“responsive.css”>
  17. </head>
  18. <body>
  19.     <!– slickを適用させたい部分 ここから –>
  20.     <section class=“slick-space”>
  21.         <!– ↓このスライドショーさせたい画像の親要素に、自分で決めたクラス名(今回は「slick-slider」を割り当てる) –>
  22.         <div class=“slick-slider contents”>
  23.             <div><img src=“Images/photo-1.jpg” alt=“”></div>
  24.             <div><img src=“Images/photo-2.jpg” alt=“”></div>
  25.             <div><img src=“Images/photo-3.jpg” alt=“”></div>
  26.             <div><img src=“Images/photo-4.jpg” alt=“”></div>
  27.             <div><img src=“Images/photo-5.jpg” alt=“”></div>
  28.             <div><img src=“Images/photo-6.jpg” alt=“”></div>
  29.             <div><img src=“Images/photo-7.jpg” alt=“”></div>
  30.         </div>
  31.     </section>
  32.     <!– slickを適用させたい部分 ここまで –>
  33.   <!– jQueryの読み込み /jQuery 1.7以降とslickフォルダ内のjsファイル–>
  34.     <script type=“text/javascript” src=“https://code.jquery.com/jquery-2.2.0.min.js”></script>
  35.     <script type=“text/javascript” src=“slick/slick.min.js”></script>
  36.     <!– 自作のjsファイルの読み込み –>
  37.     <script type=“text/javascript” src=“main.js”></script>
  38. </body>
  39. </html>

↓style.css↓

  1. .slick-space {
  2.     width: 90%;
  3.     margin: 50px auto;
  4. }
  5. .contents {
  6.     text-align: center;
  7. }
  8. .contents img {
  9.     width: 100%;
  10.     height: 500px;
  11.     object-fit: cover;
  12. }

↓main.js↓

  1. $(document).on(‘ready’, function(){
  2.     $(‘.slick-slider’).slick();
  3.   });

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

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

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

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

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

  1. .slick-prev:before,
  2. .slick-next:before
  3. {
  4.     font-family: ‘slick’;
  5.     font-size: 20px;
  6.     line-height: 1;
  7.     opacity: .75;
  8.     color: black; /*←ここで矢印の色変更 */
  9.     -webkit-font-smoothing: antialiased;
  10.     -moz-osx-font-smoothing: grayscale;
  11. }

矢印が黒丸になりました^^

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

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

  1. $(document).on(‘ready’, function(){
  2.     $(‘.slick-slider’).slick({
  3.         dots: true,
  4.         infinite: false,
  5.         speed: 300,
  6.         slidesToShow: 4,
  7.         slidesToScroll: 4,
  8.         responsive: [
  9.           {
  10.             breakpoint: 1024,
  11.             settings: {
  12.               slidesToShow: 3,
  13.               slidesToScroll: 3,
  14.               infinite: true,
  15.               dots: true
  16.             }
  17.           },
  18.           {
  19.             breakpoint: 600,
  20.             settings: {
  21.               slidesToShow: 2,
  22.               slidesToScroll: 2
  23.             }
  24.           },
  25.           {
  26.             breakpoint: 480,
  27.             settings: {
  28.               slidesToShow: 1,
  29.               slidesToScroll: 1
  30.             }
  31.           }
  32.         ]
  33.       });
  34.   });

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

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

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

すてきなHP制作を!

それでは。